/* =============================================================================
CodeMirror
========================================================================== */

/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror div.CodeMirror-cursor {
  border-left: 1px solid black;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
  width: auto;
  border: 0;
  background: #7e7;
}
.CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}

.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
}
@-moz-keyframes blink {
  0% { background: #7e7; }
  50% { background: none; }
  100% { background: #7e7; }
}
@-webkit-keyframes blink {
  0% { background: #7e7; }
  50% { background: none; }
  100% { background: #7e7; }
}
@keyframes blink {
  0% { background: #7e7; }
  50% { background: none; }
  100% { background: #7e7; }
}

/* Can style cursor different in overwrite (non-insert) mode */
div.CodeMirror-overwrite div.CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px; margin-right: -30px;
  padding-bottom: 30px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 30px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actuall scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  margin-bottom: -30px;
  /* Hack to make IE7 behave */
  *zoom:1;
  *display:inline;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  height: 100%;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
.CodeMirror-wrap pre {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  overflow: auto;
}

.CodeMirror-widget {}

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.CodeMirror-measure pre { position: static; }

.CodeMirror div.CodeMirror-cursor {
  position: absolute;
  border-right: none;
  width: 0;
}

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror ::selection { background: #d7d4f0; }
.CodeMirror ::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background: #ffa;
  background: rgba(255, 255, 0, .4);
}

/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }

/*

    Name:       3024 day
    Author:     Jan T. Sott (http://github.com/idleberg)

    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)

*/

.cm-s-3024-day.CodeMirror {background: #f7f7f7; color: #3a3432;}
.cm-s-3024-day div.CodeMirror-selected {background: #d6d5d4 !important;}
.cm-s-3024-day.CodeMirror ::selection { background: #d6d5d4; }
.cm-s-3024-day.CodeMirror ::-moz-selection { background: #d9d9d9; }

.cm-s-3024-day .CodeMirror-gutters {background: #f7f7f7; border-right: 0px;}
.cm-s-3024-day .CodeMirror-guttermarker { color: #db2d20; }
.cm-s-3024-day .CodeMirror-guttermarker-subtle { color: #807d7c; }
.cm-s-3024-day .CodeMirror-linenumber {color: #807d7c;}

.cm-s-3024-day .CodeMirror-cursor {border-left: 1px solid #5c5855 !important;}

.cm-s-3024-day span.cm-comment {color: #cdab53;}
.cm-s-3024-day span.cm-atom {color: #a16a94;}
.cm-s-3024-day span.cm-number {color: #a16a94;}

.cm-s-3024-day span.cm-property, .cm-s-3024-day span.cm-attribute {color: #01a252;}
.cm-s-3024-day span.cm-keyword {color: #db2d20;}
.cm-s-3024-day span.cm-string {color: #fded02;}

.cm-s-3024-day span.cm-variable {color: #01a252;}
.cm-s-3024-day span.cm-variable-2 {color: #01a0e4;}
.cm-s-3024-day span.cm-def {color: #e8bbd0;}
.cm-s-3024-day span.cm-bracket {color: #3a3432;}
.cm-s-3024-day span.cm-tag {color: #db2d20;}
.cm-s-3024-day span.cm-link {color: #a16a94;}
.cm-s-3024-day span.cm-error {background: #db2d20; color: #5c5855;}

.cm-s-3024-day .CodeMirror-activeline-background {background: #e8f2ff !important;}
.cm-s-3024-day .CodeMirror-matchingbracket { text-decoration: underline; color: #a16a94 !important;}
/*

    Name:       3024 night
    Author:     Jan T. Sott (http://github.com/idleberg)

    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)

*/

.cm-s-3024-night.CodeMirror {background: #090300; color: #d6d5d4;}
.cm-s-3024-night div.CodeMirror-selected {background: #3a3432 !important;}
.cm-s-3024-night.CodeMirror ::selection { background: rgba(58, 52, 50, .99); }
.cm-s-3024-night.CodeMirror ::-moz-selection { background: rgba(58, 52, 50, .99); }
.cm-s-3024-night .CodeMirror-gutters {background: #090300; border-right: 0px;}
.cm-s-3024-night .CodeMirror-guttermarker { color: #db2d20; }
.cm-s-3024-night .CodeMirror-guttermarker-subtle { color: #5c5855; }
.cm-s-3024-night .CodeMirror-linenumber {color: #5c5855;}

.cm-s-3024-night .CodeMirror-cursor {border-left: 1px solid #807d7c !important;}

.cm-s-3024-night span.cm-comment {color: #cdab53;}
.cm-s-3024-night span.cm-atom {color: #a16a94;}
.cm-s-3024-night span.cm-number {color: #a16a94;}

.cm-s-3024-night span.cm-property, .cm-s-3024-night span.cm-attribute {color: #01a252;}
.cm-s-3024-night span.cm-keyword {color: #db2d20;}
.cm-s-3024-night span.cm-string {color: #fded02;}

.cm-s-3024-night span.cm-variable {color: #01a252;}
.cm-s-3024-night span.cm-variable-2 {color: #01a0e4;}
.cm-s-3024-night span.cm-def {color: #e8bbd0;}
.cm-s-3024-night span.cm-bracket {color: #d6d5d4;}
.cm-s-3024-night span.cm-tag {color: #db2d20;}
.cm-s-3024-night span.cm-link {color: #a16a94;}
.cm-s-3024-night span.cm-error {background: #db2d20; color: #807d7c;}

.cm-s-3024-night .CodeMirror-activeline-background {background: #2F2F2F !important;}
.cm-s-3024-night .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
.cm-s-ambiance.CodeMirror {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
/* ambiance theme for codemirror */

/* Color scheme */

.cm-s-ambiance .cm-keyword { color: #cda869; }
.cm-s-ambiance .cm-atom { color: #CF7EA9; }
.cm-s-ambiance .cm-number { color: #78CF8A; }
.cm-s-ambiance .cm-def { color: #aac6e3; }
.cm-s-ambiance .cm-variable { color: #ffb795; }
.cm-s-ambiance .cm-variable-2 { color: #eed1b3; }
.cm-s-ambiance .cm-variable-3 { color: #faded3; }
.cm-s-ambiance .cm-property { color: #eed1b3; }
.cm-s-ambiance .cm-operator {color: #fa8d6a;}
.cm-s-ambiance .cm-comment { color: #555; font-style:italic; }
.cm-s-ambiance .cm-string { color: #8f9d6a; }
.cm-s-ambiance .cm-string-2 { color: #9d937c; }
.cm-s-ambiance .cm-meta { color: #D2A8A1; }
.cm-s-ambiance .cm-qualifier { color: yellow; }
.cm-s-ambiance .cm-builtin { color: #9999cc; }
.cm-s-ambiance .cm-bracket { color: #24C2C7; }
.cm-s-ambiance .cm-tag { color: #fee4ff }
.cm-s-ambiance .cm-attribute {  color: #9B859D; }
.cm-s-ambiance .cm-header {color: blue;}
.cm-s-ambiance .cm-quote { color: #24C2C7; }
.cm-s-ambiance .cm-hr { color: pink; }
.cm-s-ambiance .cm-link { color: #F4C20B; }
.cm-s-ambiance .cm-special { color: #FF9D00; }
.cm-s-ambiance .cm-error { color: #AF2018; }

.cm-s-ambiance .CodeMirror-matchingbracket { color: #0f0; }
.cm-s-ambiance .CodeMirror-nonmatchingbracket { color: #f22; }

.cm-s-ambiance .CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
.cm-s-ambiance.CodeMirror-focused .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
.cm-s-ambiance.CodeMirror ::selection { background: rgba(255, 255, 255, 0.10); }
.cm-s-ambiance.CodeMirror ::-moz-selection { background: rgba(255, 255, 255, 0.10); }

/* Editor styling */

.cm-s-ambiance.CodeMirror {
  line-height: 1.40em;
  color: #E6E1DC;
  background-color: #202020;
  -webkit-box-shadow: inset 0 0 10px black;
  -moz-box-shadow: inset 0 0 10px black;
  box-shadow: inset 0 0 10px black;
}

.cm-s-ambiance .CodeMirror-gutters {
  background: #3D3D3D;
  border-right: 1px solid #4D4D4D;
  box-shadow: 0 10px 20px black;
}

.cm-s-ambiance .CodeMirror-linenumber {
  text-shadow: 0px 1px 1px #4d4d4d;
  color: #111;
  padding: 0 5px;
}

.cm-s-ambiance .CodeMirror-guttermarker { color: #aaa; }
.cm-s-ambiance .CodeMirror-guttermarker-subtle { color: #111; }

.cm-s-ambiance .CodeMirror-lines .CodeMirror-cursor {
  border-left: 1px solid #7991E8;
}

.cm-s-ambiance .CodeMirror-activeline-background {
  background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.031);
}

.cm-s-ambiance.CodeMirror,
.cm-s-ambiance .CodeMirror-gutters {
  background-image: url("");
}
/*

    Name:       Base16 Default Dark
    Author:     Chris Kempson (http://chriskempson.com)

    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-chrome-devtools)
    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)

*/

.cm-s-base16-dark.CodeMirror {background: #151515; color: #e0e0e0;}
.cm-s-base16-dark div.CodeMirror-selected {background: #303030 !important;}
.cm-s-base16-dark.CodeMirror ::selection { background: rgba(48, 48, 48, .99); }
.cm-s-base16-dark.CodeMirror ::-moz-selection { background: rgba(48, 48, 48, .99); }
.cm-s-base16-dark .CodeMirror-gutters {background: #151515; border-right: 0px;}
.cm-s-base16-dark .CodeMirror-guttermarker { color: #ac4142; }
.cm-s-base16-dark .CodeMirror-guttermarker-subtle { color: #505050; }
.cm-s-base16-dark .CodeMirror-linenumber {color: #505050;}
.cm-s-base16-dark .CodeMirror-cursor {border-left: 1px solid #b0b0b0 !important;}

.cm-s-base16-dark span.cm-comment {color: #8f5536;}
.cm-s-base16-dark span.cm-atom {color: #aa759f;}
.cm-s-base16-dark span.cm-number {color: #aa759f;}

.cm-s-base16-dark span.cm-property, .cm-s-base16-dark span.cm-attribute {color: #90a959;}
.cm-s-base16-dark span.cm-keyword {color: #ac4142;}
.cm-s-base16-dark span.cm-string {color: #f4bf75;}

.cm-s-base16-dark span.cm-variable {color: #90a959;}
.cm-s-base16-dark span.cm-variable-2 {color: #6a9fb5;}
.cm-s-base16-dark span.cm-def {color: #d28445;}
.cm-s-base16-dark span.cm-bracket {color: #e0e0e0;}
.cm-s-base16-dark span.cm-tag {color: #ac4142;}
.cm-s-base16-dark span.cm-link {color: #aa759f;}
.cm-s-base16-dark span.cm-error {background: #ac4142; color: #b0b0b0;}

.cm-s-base16-dark .CodeMirror-activeline-background {background: #202020 !important;}
.cm-s-base16-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
/*

    Name:       Base16 Default Light
    Author:     Chris Kempson (http://chriskempson.com)

    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-chrome-devtools)
    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)

*/

.cm-s-base16-light.CodeMirror {background: #f5f5f5; color: #202020;}
.cm-s-base16-light div.CodeMirror-selected {background: #e0e0e0 !important;}
.cm-s-base16-light.CodeMirror ::selection { background: #e0e0e0; }
.cm-s-base16-light.CodeMirror ::-moz-selection { background: #e0e0e0; }
.cm-s-base16-light .CodeMirror-gutters {background: #f5f5f5; border-right: 0px;}
.cm-s-base16-light .CodeMirror-guttermarker { color: #ac4142; }
.cm-s-base16-light .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
.cm-s-base16-light .CodeMirror-linenumber {color: #b0b0b0;}
.cm-s-base16-light .CodeMirror-cursor {border-left: 1px solid #505050 !important;}

.cm-s-base16-light span.cm-comment {color: #8f5536;}
.cm-s-base16-light span.cm-atom {color: #aa759f;}
.cm-s-base16-light span.cm-number {color: #aa759f;}

.cm-s-base16-light span.cm-property, .cm-s-base16-light span.cm-attribute {color: #90a959;}
.cm-s-base16-light span.cm-keyword {color: #ac4142;}
.cm-s-base16-light span.cm-string {color: #f4bf75;}

.cm-s-base16-light span.cm-variable {color: #90a959;}
.cm-s-base16-light span.cm-variable-2 {color: #6a9fb5;}
.cm-s-base16-light span.cm-def {color: #d28445;}
.cm-s-base16-light span.cm-bracket {color: #202020;}
.cm-s-base16-light span.cm-tag {color: #ac4142;}
.cm-s-base16-light span.cm-link {color: #aa759f;}
.cm-s-base16-light span.cm-error {background: #ac4142; color: #505050;}

.cm-s-base16-light .CodeMirror-activeline-background {background: #DDDCDC !important;}
.cm-s-base16-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
/* Port of TextMate's Blackboard theme */

.cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; }
.cm-s-blackboard .CodeMirror-selected { background: #253B76 !important; }
.cm-s-blackboard.CodeMirror ::selection { background: rgba(37, 59, 118, .99); }
.cm-s-blackboard.CodeMirror ::-moz-selection { background: rgba(37, 59, 118, .99); }
.cm-s-blackboard .CodeMirror-gutters { background: #0C1021; border-right: 0; }
.cm-s-blackboard .CodeMirror-guttermarker { color: #FBDE2D; }
.cm-s-blackboard .CodeMirror-guttermarker-subtle { color: #888; }
.cm-s-blackboard .CodeMirror-linenumber { color: #888; }
.cm-s-blackboard .CodeMirror-cursor { border-left: 1px solid #A7A7A7 !important; }

.cm-s-blackboard .cm-keyword { color: #FBDE2D; }
.cm-s-blackboard .cm-atom { color: #D8FA3C; }
.cm-s-blackboard .cm-number { color: #D8FA3C; }
.cm-s-blackboard .cm-def { color: #8DA6CE; }
.cm-s-blackboard .cm-variable { color: #FF6400; }
.cm-s-blackboard .cm-operator { color: #FBDE2D;}
.cm-s-blackboard .cm-comment { color: #AEAEAE; }
.cm-s-blackboard .cm-string { color: #61CE3C; }
.cm-s-blackboard .cm-string-2 { color: #61CE3C; }
.cm-s-blackboard .cm-meta { color: #D8FA3C; }
.cm-s-blackboard .cm-builtin { color: #8DA6CE; }
.cm-s-blackboard .cm-tag { color: #8DA6CE; }
.cm-s-blackboard .cm-attribute { color: #8DA6CE; }
.cm-s-blackboard .cm-header { color: #FF6400; }
.cm-s-blackboard .cm-hr { color: #AEAEAE; }
.cm-s-blackboard .cm-link { color: #8DA6CE; }
.cm-s-blackboard .cm-error { background: #9D1E15; color: #F8F8F8; }

.cm-s-blackboard .CodeMirror-activeline-background {background: #3C3636 !important;}
.cm-s-blackboard .CodeMirror-matchingbracket {outline:1px solid grey;color:white !important}.cm-s-cobalt.CodeMirror { background: #002240; color: white; }
.cm-s-cobalt div.CodeMirror-selected { background: #b36539 !important; }
.cm-s-cobalt.CodeMirror ::selection { background: rgba(179, 101, 57, .99); }
.cm-s-cobalt.CodeMirror ::-moz-selection { background: rgba(179, 101, 57, .99); }
.cm-s-cobalt .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
.cm-s-cobalt .CodeMirror-guttermarker { color: #ffee80; }
.cm-s-cobalt .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-cobalt .CodeMirror-linenumber { color: #d0d0d0; }
.cm-s-cobalt .CodeMirror-cursor { border-left: 1px solid white !important; }

.cm-s-cobalt span.cm-comment { color: #08f; }
.cm-s-cobalt span.cm-atom { color: #845dc4; }
.cm-s-cobalt span.cm-number, .cm-s-cobalt span.cm-attribute { color: #ff80e1; }
.cm-s-cobalt span.cm-keyword { color: #ffee80; }
.cm-s-cobalt span.cm-string { color: #3ad900; }
.cm-s-cobalt span.cm-meta { color: #ff9d00; }
.cm-s-cobalt span.cm-variable-2, .cm-s-cobalt span.cm-tag { color: #9effff; }
.cm-s-cobalt span.cm-variable-3, .cm-s-cobalt span.cm-def { color: white; }
.cm-s-cobalt span.cm-bracket { color: #d8d8d8; }
.cm-s-cobalt span.cm-builtin, .cm-s-cobalt span.cm-special { color: #ff9e59; }
.cm-s-cobalt span.cm-link { color: #845dc4; }
.cm-s-cobalt span.cm-error { color: #9d1e15; }

.cm-s-cobalt .CodeMirror-activeline-background {background: #002D57 !important;}
.cm-s-cobalt .CodeMirror-matchingbracket {outline:1px solid grey;color:white !important}
.cm-s-colorforth.CodeMirror { background: #000000; color: #f8f8f8; }
.cm-s-colorforth .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
.cm-s-colorforth .CodeMirror-guttermarker { color: #FFBD40; }
.cm-s-colorforth .CodeMirror-guttermarker-subtle { color: #78846f; }
.cm-s-colorforth .CodeMirror-linenumber { color: #bababa; }
.cm-s-colorforth .CodeMirror-cursor { border-left: 1px solid white !important; }

.cm-s-colorforth span.cm-comment     { color: #ededed; }
.cm-s-colorforth span.cm-def         { color: #ff1c1c; font-weight:bold; }
.cm-s-colorforth span.cm-keyword     { color: #ffd900; }
.cm-s-colorforth span.cm-builtin     { color: #00d95a; }
.cm-s-colorforth span.cm-variable    { color: #73ff00; }
.cm-s-colorforth span.cm-string      { color: #007bff; }
.cm-s-colorforth span.cm-number      { color: #00c4ff; }
.cm-s-colorforth span.cm-atom        { color: #606060; }

.cm-s-colorforth span.cm-variable-2  { color: #EEE; }
.cm-s-colorforth span.cm-variable-3  { color: #DDD; }
.cm-s-colorforth span.cm-property    {}
.cm-s-colorforth span.cm-operator    {}

.cm-s-colorforth span.cm-meta        { color: yellow; }
.cm-s-colorforth span.cm-qualifier   { color: #FFF700; }
.cm-s-colorforth span.cm-bracket     { color: #cc7; }
.cm-s-colorforth span.cm-tag         { color: #FFBD40; }
.cm-s-colorforth span.cm-attribute   { color: #FFF700; }
.cm-s-colorforth span.cm-error       { color: #f00; }

.cm-s-colorforth .CodeMirror-selected { background: #333d53 !important; }

.cm-s-colorforth span.cm-compilation { background: rgba(255, 255, 255, 0.12); }

.cm-s-colorforth .CodeMirror-activeline-background {background: #253540 !important;}
.cm-s-eclipse span.cm-meta {color: #FF1717;}
.cm-s-eclipse span.cm-keyword { line-height: 1em; font-weight: bold; color: #7F0055; }
.cm-s-eclipse span.cm-atom {color: #219;}
.cm-s-eclipse span.cm-number {color: #164;}
.cm-s-eclipse span.cm-def {color: #00f;}
.cm-s-eclipse span.cm-variable {color: black;}
.cm-s-eclipse span.cm-variable-2 {color: #0000C0;}
.cm-s-eclipse span.cm-variable-3 {color: #0000C0;}
.cm-s-eclipse span.cm-property {color: black;}
.cm-s-eclipse span.cm-operator {color: black;}
.cm-s-eclipse span.cm-comment {color: #3F7F5F;}
.cm-s-eclipse span.cm-string {color: #2A00FF;}
.cm-s-eclipse span.cm-string-2 {color: #f50;}
.cm-s-eclipse span.cm-qualifier {color: #555;}
.cm-s-eclipse span.cm-builtin {color: #30a;}
.cm-s-eclipse span.cm-bracket {color: #cc7;}
.cm-s-eclipse span.cm-tag {color: #170;}
.cm-s-eclipse span.cm-attribute {color: #00c;}
.cm-s-eclipse span.cm-link {color: #219;}
.cm-s-eclipse span.cm-error {color: #f00;}

.cm-s-eclipse .CodeMirror-activeline-background {background: #e8f2ff !important;}
.cm-s-eclipse .CodeMirror-matchingbracket {outline:1px solid grey; color:black !important;}
.cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom {color: #762;}
.cm-s-elegant span.cm-comment {color: #262; font-style: italic; line-height: 1em;}
.cm-s-elegant span.cm-meta {color: #555; font-style: italic; line-height: 1em;}
.cm-s-elegant span.cm-variable {color: black;}
.cm-s-elegant span.cm-variable-2 {color: #b11;}
.cm-s-elegant span.cm-qualifier {color: #555;}
.cm-s-elegant span.cm-keyword {color: #730;}
.cm-s-elegant span.cm-builtin {color: #30a;}
.cm-s-elegant span.cm-link {color: #762;}
.cm-s-elegant span.cm-error {background-color: #fdd;}

.cm-s-elegant .CodeMirror-activeline-background {background: #e8f2ff !important;}
.cm-s-elegant .CodeMirror-matchingbracket {outline:1px solid grey; color:black !important;}
.cm-s-erlang-dark.CodeMirror { background: #002240; color: white; }
.cm-s-erlang-dark div.CodeMirror-selected { background: #b36539 !important; }
.cm-s-erlang-dark.CodeMirror ::selection { background: rgba(179, 101, 57, .99); }
.cm-s-erlang-dark.CodeMirror ::-moz-selection { background: rgba(179, 101, 57, .99); }
.cm-s-erlang-dark .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
.cm-s-erlang-dark .CodeMirror-guttermarker { color: white; }
.cm-s-erlang-dark .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-erlang-dark .CodeMirror-linenumber { color: #d0d0d0; }
.cm-s-erlang-dark .CodeMirror-cursor { border-left: 1px solid white !important; }

.cm-s-erlang-dark span.cm-atom       { color: #f133f1; }
.cm-s-erlang-dark span.cm-attribute  { color: #ff80e1; }
.cm-s-erlang-dark span.cm-bracket    { color: #ff9d00; }
.cm-s-erlang-dark span.cm-builtin    { color: #eaa; }
.cm-s-erlang-dark span.cm-comment    { color: #77f; }
.cm-s-erlang-dark span.cm-def        { color: #e7a; }
.cm-s-erlang-dark span.cm-keyword    { color: #ffee80; }
.cm-s-erlang-dark span.cm-meta       { color: #50fefe; }
.cm-s-erlang-dark span.cm-number     { color: #ffd0d0; }
.cm-s-erlang-dark span.cm-operator   { color: #d55; }
.cm-s-erlang-dark span.cm-property   { color: #ccc; }
.cm-s-erlang-dark span.cm-qualifier  { color: #ccc; }
.cm-s-erlang-dark span.cm-quote      { color: #ccc; }
.cm-s-erlang-dark span.cm-special    { color: #ffbbbb; }
.cm-s-erlang-dark span.cm-string     { color: #3ad900; }
.cm-s-erlang-dark span.cm-string-2   { color: #ccc; }
.cm-s-erlang-dark span.cm-tag        { color: #9effff; }
.cm-s-erlang-dark span.cm-variable   { color: #50fe50; }
.cm-s-erlang-dark span.cm-variable-2 { color: #e0e; }
.cm-s-erlang-dark span.cm-variable-3 { color: #ccc; }
.cm-s-erlang-dark span.cm-error      { color: #9d1e15; }

.cm-s-erlang-dark .CodeMirror-activeline-background {background: #013461 !important;}
.cm-s-erlang-dark .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
/*
http://lesscss.org/ dark theme
Ported to CodeMirror by Peter Kroon
*/
.cm-s-lesser-dark {
  line-height: 1.3em;
}
.cm-s-lesser-dark.CodeMirror { background: #262626; color: #EBEFE7; text-shadow: 0 -1px 1px #262626; }
.cm-s-lesser-dark div.CodeMirror-selected {background: #45443B !important;} /* 33322B*/
.cm-s-lesser-dark.CodeMirror ::selection { background: rgba(69, 68, 59, .99); }
.cm-s-lesser-dark.CodeMirror ::-moz-selection { background: rgba(69, 68, 59, .99); }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark pre { padding: 0 8px; }/*editable code holder*/

.cm-s-lesser-dark.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/

.cm-s-lesser-dark .CodeMirror-gutters { background: #262626; border-right:1px solid #aaa; }
.cm-s-lesser-dark .CodeMirror-guttermarker { color: #599eff; }
.cm-s-lesser-dark .CodeMirror-guttermarker-subtle { color: #777; }
.cm-s-lesser-dark .CodeMirror-linenumber { color: #777; }

.cm-s-lesser-dark span.cm-keyword { color: #599eff; }
.cm-s-lesser-dark span.cm-atom { color: #C2B470; }
.cm-s-lesser-dark span.cm-number { color: #B35E4D; }
.cm-s-lesser-dark span.cm-def {color: white;}
.cm-s-lesser-dark span.cm-variable { color:#D9BF8C; }
.cm-s-lesser-dark span.cm-variable-2 { color: #669199; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-property {color: #92A75C;}
.cm-s-lesser-dark span.cm-operator {color: #92A75C;}
.cm-s-lesser-dark span.cm-comment { color: #666; }
.cm-s-lesser-dark span.cm-string { color: #BCD279; }
.cm-s-lesser-dark span.cm-string-2 {color: #f50;}
.cm-s-lesser-dark span.cm-meta { color: #738C73; }
.cm-s-lesser-dark span.cm-qualifier {color: #555;}
.cm-s-lesser-dark span.cm-builtin { color: #ff9e59; }
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark span.cm-tag { color: #669199; }
.cm-s-lesser-dark span.cm-attribute {color: #00c;}
.cm-s-lesser-dark span.cm-header {color: #a0a;}
.cm-s-lesser-dark span.cm-quote {color: #090;}
.cm-s-lesser-dark span.cm-hr {color: #999;}
.cm-s-lesser-dark span.cm-link {color: #00c;}
.cm-s-lesser-dark span.cm-error { color: #9d1e15; }

.cm-s-lesser-dark .CodeMirror-activeline-background {background: #3C3A3A !important;}
.cm-s-lesser-dark .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
/****************************************************************/
/*   Based on mbonaci's Brackets mbo theme                      */
/*   https://github.com/mbonaci/global/blob/master/Mbo.tmTheme  */
/*   Create your own: http://tmtheme-editor.herokuapp.com       */
/****************************************************************/

.cm-s-mbo.CodeMirror {background: #2c2c2c; color: #ffffec;}
.cm-s-mbo div.CodeMirror-selected {background: #716C62 !important;}
.cm-s-mbo.CodeMirror ::selection { background: rgba(113, 108, 98, .99); }
.cm-s-mbo.CodeMirror ::-moz-selection { background: rgba(113, 108, 98, .99); }
.cm-s-mbo .CodeMirror-gutters {background: #4e4e4e; border-right: 0px;}
.cm-s-mbo .CodeMirror-guttermarker { color: white; }
.cm-s-mbo .CodeMirror-guttermarker-subtle { color: grey; }
.cm-s-mbo .CodeMirror-linenumber {color: #dadada;}
.cm-s-mbo .CodeMirror-cursor {border-left: 1px solid #ffffec !important;}

.cm-s-mbo span.cm-comment {color: #95958a;}
.cm-s-mbo span.cm-atom {color: #00a8c6;}
.cm-s-mbo span.cm-number {color: #00a8c6;}

.cm-s-mbo span.cm-property, .cm-s-mbo span.cm-attribute {color: #9ddfe9;}
.cm-s-mbo span.cm-keyword {color: #ffb928;}
.cm-s-mbo span.cm-string {color: #ffcf6c;}
.cm-s-mbo span.cm-string.cm-property {color: #ffffec;}

.cm-s-mbo span.cm-variable {color: #ffffec;}
.cm-s-mbo span.cm-variable-2 {color: #00a8c6;}
.cm-s-mbo span.cm-def {color: #ffffec;}
.cm-s-mbo span.cm-bracket {color: #fffffc; font-weight: bold;}
.cm-s-mbo span.cm-tag {color: #9ddfe9;}
.cm-s-mbo span.cm-link {color: #f54b07;}
.cm-s-mbo span.cm-error {border-bottom: #636363; color: #ffffec;}
.cm-s-mbo span.cm-qualifier {color: #ffffec;}

.cm-s-mbo .CodeMirror-activeline-background {background: #494b41 !important;}
.cm-s-mbo .CodeMirror-matchingbracket {color: #222 !important;}
.cm-s-mbo .CodeMirror-matchingtag {background: rgba(255, 255, 255, .37);}
/*
  MDN-LIKE Theme - Mozilla
  Ported to CodeMirror by Peter Kroon <plakroon@gmail.com>
  Report bugs/issues here: https://github.com/codemirror/CodeMirror/issues
  GitHub: @peterkroon

  The mdn-like theme is inspired on the displayed code examples at: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

*/
.cm-s-mdn-like.CodeMirror { color: #999; background-color: #fff; }
.cm-s-mdn-like .CodeMirror-selected { background: #cfc !important; }
.cm-s-mdn-like.CodeMirror ::selection { background: #cfc; }
.cm-s-mdn-like.CodeMirror ::-moz-selection { background: #cfc; }

.cm-s-mdn-like .CodeMirror-gutters { background: #f8f8f8; border-left: 6px solid rgba(0,83,159,0.65); color: #333; }
.cm-s-mdn-like .CodeMirror-linenumber { color: #aaa; padding-left: 8px; }
div.cm-s-mdn-like .CodeMirror-cursor { border-left: 2px solid #222; }

.cm-s-mdn-like .cm-keyword {  color: #6262FF; }
.cm-s-mdn-like .cm-atom { color: #F90; }
.cm-s-mdn-like .cm-number { color:  #ca7841; }
.cm-s-mdn-like .cm-def { color: #8DA6CE; }
.cm-s-mdn-like span.cm-variable-2, .cm-s-mdn-like span.cm-tag { color: #690; }
.cm-s-mdn-like span.cm-variable-3, .cm-s-mdn-like span.cm-def { color: #07a; }

.cm-s-mdn-like .cm-variable { color: #07a; }
.cm-s-mdn-like .cm-property { color: #905; }
.cm-s-mdn-like .cm-qualifier { color: #690; }

.cm-s-mdn-like .cm-operator { color: #cda869; }
.cm-s-mdn-like .cm-comment { color:#777; font-weight:normal; }
.cm-s-mdn-like .cm-string { color:#07a; font-style:italic; }
.cm-s-mdn-like .cm-string-2 { color:#bd6b18; } /*?*/
.cm-s-mdn-like .cm-meta { color: #000; } /*?*/
.cm-s-mdn-like .cm-builtin { color: #9B7536; } /*?*/
.cm-s-mdn-like .cm-tag { color: #997643; }
.cm-s-mdn-like .cm-attribute { color: #d6bb6d; } /*?*/
.cm-s-mdn-like .cm-header { color: #FF6400; }
.cm-s-mdn-like .cm-hr { color: #AEAEAE; }
.cm-s-mdn-like .cm-link {   color:#ad9361; font-style:italic; text-decoration:none; }
.cm-s-mdn-like .cm-error { border-bottom: 1px solid red; }

div.cm-s-mdn-like .CodeMirror-activeline-background {background: #efefff;}
div.cm-s-mdn-like span.CodeMirror-matchingbracket {outline:1px solid grey; color: inherit;}

.cm-s-mdn-like.CodeMirror { background-image: url(); }
/* Based on the theme at http://bonsaiden.github.com/JavaScript-Garden */

/*<!--match-->*/
.cm-s-midnight span.CodeMirror-matchhighlight { background: #494949; }
.cm-s-midnight.CodeMirror-focused span.CodeMirror-matchhighlight { background: #314D67 !important; }

/*<!--activeline-->*/
.cm-s-midnight .CodeMirror-activeline-background {background: #253540 !important;}

.cm-s-midnight.CodeMirror {
    background: #0F192A;
    color: #D1EDFF;
}

.cm-s-midnight.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}

.cm-s-midnight div.CodeMirror-selected {background: #314D67 !important;}
.cm-s-midnight.CodeMirror ::selection { background: rgba(49, 77, 103, .99); }
.cm-s-midnight.CodeMirror ::-moz-selection { background: rgba(49, 77, 103, .99); }
.cm-s-midnight .CodeMirror-gutters {background: #0F192A; border-right: 1px solid;}
.cm-s-midnight .CodeMirror-guttermarker { color: white; }
.cm-s-midnight .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-midnight .CodeMirror-linenumber {color: #D0D0D0;}
.cm-s-midnight .CodeMirror-cursor {
    border-left: 1px solid #F8F8F0 !important;
}

.cm-s-midnight span.cm-comment {color: #428BDD;}
.cm-s-midnight span.cm-atom {color: #AE81FF;}
.cm-s-midnight span.cm-number {color: #D1EDFF;}

.cm-s-midnight span.cm-property, .cm-s-midnight span.cm-attribute {color: #A6E22E;}
.cm-s-midnight span.cm-keyword {color: #E83737;}
.cm-s-midnight span.cm-string {color: #1DC116;}

.cm-s-midnight span.cm-variable {color: #FFAA3E;}
.cm-s-midnight span.cm-variable-2 {color: #FFAA3E;}
.cm-s-midnight span.cm-def {color: #4DD;}
.cm-s-midnight span.cm-bracket {color: #D1EDFF;}
.cm-s-midnight span.cm-tag {color: #449;}
.cm-s-midnight span.cm-link {color: #AE81FF;}
.cm-s-midnight span.cm-error {background: #F92672; color: #F8F8F0;}

.cm-s-midnight .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}
/* Based on Sublime Text's Monokai theme */

.cm-s-monokai.CodeMirror {background: #272822; color: #f8f8f2;}
.cm-s-monokai div.CodeMirror-selected {background: #49483E !important;}
.cm-s-monokai.CodeMirror ::selection { background: rgba(73, 72, 62, .99); }
.cm-s-monokai.CodeMirror ::-moz-selection { background: rgba(73, 72, 62, .99); }
.cm-s-monokai .CodeMirror-gutters {background: #272822; border-right: 0px;}
.cm-s-monokai .CodeMirror-guttermarker { color: white; }
.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-monokai .CodeMirror-linenumber {color: #d0d0d0;}
.cm-s-monokai .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}

.cm-s-monokai span.cm-comment {color: #75715e;}
.cm-s-monokai span.cm-atom {color: #ae81ff;}
.cm-s-monokai span.cm-number {color: #ae81ff;}

.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {color: #a6e22e;}
.cm-s-monokai span.cm-keyword {color: #f92672;}
.cm-s-monokai span.cm-string {color: #e6db74;}

.cm-s-monokai span.cm-variable {color: #f8f8f2;}
.cm-s-monokai span.cm-variable-2 {color: #9effff;}
.cm-s-monokai span.cm-variable-3 {color: #66d9ef;}
.cm-s-monokai span.cm-def {color: #fd971f;}
.cm-s-monokai span.cm-bracket {color: #f8f8f2;}
.cm-s-monokai span.cm-tag {color: #f92672;}
.cm-s-monokai span.cm-link {color: #ae81ff;}
.cm-s-monokai span.cm-error {background: #f92672; color: #f8f8f0;}

.cm-s-monokai .CodeMirror-activeline-background {background: #373831 !important;}
.cm-s-monokai .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}
.cm-s-neat span.cm-comment { color: #a86; }
.cm-s-neat span.cm-keyword { line-height: 1em; font-weight: bold; color: blue; }
.cm-s-neat span.cm-string { color: #a22; }
.cm-s-neat span.cm-builtin { line-height: 1em; font-weight: bold; color: #077; }
.cm-s-neat span.cm-special { line-height: 1em; font-weight: bold; color: #0aa; }
.cm-s-neat span.cm-variable { color: black; }
.cm-s-neat span.cm-number, .cm-s-neat span.cm-atom { color: #3a3; }
.cm-s-neat span.cm-meta {color: #555;}
.cm-s-neat span.cm-link { color: #3a3; }

.cm-s-neat .CodeMirror-activeline-background {background: #e8f2ff !important;}
.cm-s-neat .CodeMirror-matchingbracket {outline:1px solid grey; color:black !important;}
/* neo theme for codemirror */

/* Color scheme */

.cm-s-neo.CodeMirror {
  background-color:#ffffff;
  color:#2e383c;
  line-height:1.4375;
}
.cm-s-neo .cm-comment {color:#75787b}
.cm-s-neo .cm-keyword, .cm-s-neo .cm-property {color:#1d75b3}
.cm-s-neo .cm-atom,.cm-s-neo .cm-number {color:#75438a}
.cm-s-neo .cm-node,.cm-s-neo .cm-tag {color:#9c3328}
.cm-s-neo .cm-string {color:#b35e14}
.cm-s-neo .cm-variable,.cm-s-neo .cm-qualifier {color:#047d65}


/* Editor styling */

.cm-s-neo pre {
  padding:0;
}

.cm-s-neo .CodeMirror-gutters {
  border:none;
  border-right:10px solid transparent;
  background-color:transparent;
}

.cm-s-neo .CodeMirror-linenumber {
  padding:0;
  color:#e0e2e5;
}

.cm-s-neo .CodeMirror-guttermarker { color: #1d75b3; }
.cm-s-neo .CodeMirror-guttermarker-subtle { color: #e0e2e5; }

.cm-s-neo div.CodeMirror-cursor {
  width: auto;
  border: 0;
  background: rgba(155,157,162,0.37);
  z-index: 1;
}
/* Loosely based on the Midnight Textmate theme */

.cm-s-night.CodeMirror { background: #0a001f; color: #f8f8f8; }
.cm-s-night div.CodeMirror-selected { background: #447 !important; }
.cm-s-night.CodeMirror ::selection { background: rgba(68, 68, 119, .99); }
.cm-s-night.CodeMirror ::-moz-selection { background: rgba(68, 68, 119, .99); }
.cm-s-night .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
.cm-s-night .CodeMirror-guttermarker { color: white; }
.cm-s-night .CodeMirror-guttermarker-subtle { color: #bbb; }
.cm-s-night .CodeMirror-linenumber { color: #f8f8f8; }
.cm-s-night .CodeMirror-cursor { border-left: 1px solid white !important; }

.cm-s-night span.cm-comment { color: #6900a1; }
.cm-s-night span.cm-atom { color: #845dc4; }
.cm-s-night span.cm-number, .cm-s-night span.cm-attribute { color: #ffd500; }
.cm-s-night span.cm-keyword { color: #599eff; }
.cm-s-night span.cm-string { color: #37f14a; }
.cm-s-night span.cm-meta { color: #7678e2; }
.cm-s-night span.cm-variable-2, .cm-s-night span.cm-tag { color: #99b2ff; }
.cm-s-night span.cm-variable-3, .cm-s-night span.cm-def { color: white; }
.cm-s-night span.cm-bracket { color: #8da6ce; }
.cm-s-night span.cm-comment { color: #6900a1; }
.cm-s-night span.cm-builtin, .cm-s-night span.cm-special { color: #ff9e59; }
.cm-s-night span.cm-link { color: #845dc4; }
.cm-s-night span.cm-error { color: #9d1e15; }

.cm-s-night .CodeMirror-activeline-background {background: #1C005A !important;}
.cm-s-night .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
/*

    Name:       Paraíso (Dark)
    Author:     Jan T. Sott

    Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror)
    Inspired by the art of Rubens LP (http://www.rubenslp.com.br)

*/

.cm-s-paraiso-dark.CodeMirror {background: #2f1e2e; color: #b9b6b0;}
.cm-s-paraiso-dark div.CodeMirror-selected {background: #41323f !important;}
.cm-s-paraiso-dark.CodeMirror ::selection { background: rgba(65, 50, 63, .99); }
.cm-s-paraiso-dark.CodeMirror ::-moz-selection { background: rgba(65, 50, 63, .99); }
.cm-s-paraiso-dark .CodeMirror-gutters {background: #2f1e2e; border-right: 0px;}
.cm-s-paraiso-dark .CodeMirror-guttermarker { color: #ef6155; }
.cm-s-paraiso-dark .CodeMirror-guttermarker-subtle { color: #776e71; }
.cm-s-paraiso-dark .CodeMirror-linenumber {color: #776e71;}
.cm-s-paraiso-dark .CodeMirror-cursor {border-left: 1px solid #8d8687 !important;}

.cm-s-paraiso-dark span.cm-comment {color: #e96ba8;}
.cm-s-paraiso-dark span.cm-atom {color: #815ba4;}
.cm-s-paraiso-dark span.cm-number {color: #815ba4;}

.cm-s-paraiso-dark span.cm-property, .cm-s-paraiso-dark span.cm-attribute {color: #48b685;}
.cm-s-paraiso-dark span.cm-keyword {color: #ef6155;}
.cm-s-paraiso-dark span.cm-string {color: #fec418;}

.cm-s-paraiso-dark span.cm-variable {color: #48b685;}
.cm-s-paraiso-dark span.cm-variable-2 {color: #06b6ef;}
.cm-s-paraiso-dark span.cm-def {color: #f99b15;}
.cm-s-paraiso-dark span.cm-bracket {color: #b9b6b0;}
.cm-s-paraiso-dark span.cm-tag {color: #ef6155;}
.cm-s-paraiso-dark span.cm-link {color: #815ba4;}
.cm-s-paraiso-dark span.cm-error {background: #ef6155; color: #8d8687;}

.cm-s-paraiso-dark .CodeMirror-activeline-background {background: #4D344A !important;}
.cm-s-paraiso-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
/*

    Name:       Paraíso (Light)
    Author:     Jan T. Sott

    Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror)
    Inspired by the art of Rubens LP (http://www.rubenslp.com.br)

*/

.cm-s-paraiso-light.CodeMirror {background: #e7e9db; color: #41323f;}
.cm-s-paraiso-light div.CodeMirror-selected {background: #b9b6b0 !important;}
.cm-s-paraiso-light.CodeMirror ::selection { background: #b9b6b0; }
.cm-s-paraiso-light.CodeMirror ::-moz-selection { background: #b9b6b0; }
.cm-s-paraiso-light .CodeMirror-gutters {background: #e7e9db; border-right: 0px;}
.cm-s-paraiso-light .CodeMirror-guttermarker { color: black; }
.cm-s-paraiso-light .CodeMirror-guttermarker-subtle { color: #8d8687; }
.cm-s-paraiso-light .CodeMirror-linenumber {color: #8d8687;}
.cm-s-paraiso-light .CodeMirror-cursor {border-left: 1px solid #776e71 !important;}

.cm-s-paraiso-light span.cm-comment {color: #e96ba8;}
.cm-s-paraiso-light span.cm-atom {color: #815ba4;}
.cm-s-paraiso-light span.cm-number {color: #815ba4;}

.cm-s-paraiso-light span.cm-property, .cm-s-paraiso-light span.cm-attribute {color: #48b685;}
.cm-s-paraiso-light span.cm-keyword {color: #ef6155;}
.cm-s-paraiso-light span.cm-string {color: #fec418;}

.cm-s-paraiso-light span.cm-variable {color: #48b685;}
.cm-s-paraiso-light span.cm-variable-2 {color: #06b6ef;}
.cm-s-paraiso-light span.cm-def {color: #f99b15;}
.cm-s-paraiso-light span.cm-bracket {color: #41323f;}
.cm-s-paraiso-light span.cm-tag {color: #ef6155;}
.cm-s-paraiso-light span.cm-link {color: #815ba4;}
.cm-s-paraiso-light span.cm-error {background: #ef6155; color: #776e71;}

.cm-s-paraiso-light .CodeMirror-activeline-background {background: #CFD1C4 !important;}
.cm-s-paraiso-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
/**
 * Pastel On Dark theme ported from ACE editor
 * @license MIT
 * @copyright AtomicPages LLC 2014
 * @author Dennis Thompson, AtomicPages LLC
 * @version 1.1
 * @source https://github.com/atomicpages/codemirror-pastel-on-dark-theme
 */

.cm-s-pastel-on-dark.CodeMirror {
  background: #2c2827;
  color: #8F938F;
  line-height: 1.5;
  font-size: 14px;
}
.cm-s-pastel-on-dark div.CodeMirror-selected { background: rgba(221,240,255,0.2) !important; }
.cm-s-pastel-on-dark.CodeMirror ::selection { background: rgba(221,240,255,0.2); }
.cm-s-pastel-on-dark.CodeMirror ::-moz-selection { background: rgba(221,240,255,0.2); }

.cm-s-pastel-on-dark .CodeMirror-gutters {
  background: #34302f;
  border-right: 0px;
  padding: 0 3px;
}
.cm-s-pastel-on-dark .CodeMirror-guttermarker { color: white; }
.cm-s-pastel-on-dark .CodeMirror-guttermarker-subtle { color: #8F938F; }
.cm-s-pastel-on-dark .CodeMirror-linenumber { color: #8F938F; }
.cm-s-pastel-on-dark .CodeMirror-cursor { border-left: 1px solid #A7A7A7 !important; }
.cm-s-pastel-on-dark span.cm-comment { color: #A6C6FF; }
.cm-s-pastel-on-dark span.cm-atom { color: #DE8E30; }
.cm-s-pastel-on-dark span.cm-number { color: #CCCCCC; }
.cm-s-pastel-on-dark span.cm-property { color: #8F938F; }
.cm-s-pastel-on-dark span.cm-attribute { color: #a6e22e; }
.cm-s-pastel-on-dark span.cm-keyword { color: #AEB2F8; }
.cm-s-pastel-on-dark span.cm-string { color: #66A968; }
.cm-s-pastel-on-dark span.cm-variable { color: #AEB2F8; }
.cm-s-pastel-on-dark span.cm-variable-2 { color: #BEBF55; }
.cm-s-pastel-on-dark span.cm-variable-3 { color: #DE8E30; }
.cm-s-pastel-on-dark span.cm-def { color: #757aD8; }
.cm-s-pastel-on-dark span.cm-bracket { color: #f8f8f2; }
.cm-s-pastel-on-dark span.cm-tag { color: #C1C144; }
.cm-s-pastel-on-dark span.cm-link { color: #ae81ff; }
.cm-s-pastel-on-dark span.cm-qualifier,.cm-s-pastel-on-dark span.cm-builtin { color: #C1C144; }
.cm-s-pastel-on-dark span.cm-error {
  background: #757aD8;
  color: #f8f8f0;
}
.cm-s-pastel-on-dark .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.031) !important; }
.cm-s-pastel-on-dark .CodeMirror-matchingbracket {
  border: 1px solid rgba(255,255,255,0.25);
  color: #8F938F !important;
  margin: -1px -1px 0 -1px;
}
.cm-s-rubyblue.CodeMirror { background: #112435; color: white; }
.cm-s-rubyblue div.CodeMirror-selected { background: #38566F !important; }
.cm-s-rubyblue.CodeMirror ::selection { background: rgba(56, 86, 111, 0.99); }
.cm-s-rubyblue.CodeMirror ::-moz-selection { background: rgba(56, 86, 111, 0.99); }
.cm-s-rubyblue .CodeMirror-gutters { background: #1F4661; border-right: 7px solid #3E7087; }
.cm-s-rubyblue .CodeMirror-guttermarker { color: white; }
.cm-s-rubyblue .CodeMirror-guttermarker-subtle { color: #3E7087; }
.cm-s-rubyblue .CodeMirror-linenumber { color: white; }
.cm-s-rubyblue .CodeMirror-cursor { border-left: 1px solid white !important; }

.cm-s-rubyblue span.cm-comment { color: #999; font-style:italic; line-height: 1em; }
.cm-s-rubyblue span.cm-atom { color: #F4C20B; }
.cm-s-rubyblue span.cm-number, .cm-s-rubyblue span.cm-attribute { color: #82C6E0; }
.cm-s-rubyblue span.cm-keyword { color: #F0F; }
.cm-s-rubyblue span.cm-string { color: #F08047; }
.cm-s-rubyblue span.cm-meta { color: #F0F; }
.cm-s-rubyblue span.cm-variable-2, .cm-s-rubyblue span.cm-tag { color: #7BD827; }
.cm-s-rubyblue span.cm-variable-3, .cm-s-rubyblue span.cm-def { color: white; }
.cm-s-rubyblue span.cm-bracket { color: #F0F; }
.cm-s-rubyblue span.cm-link { color: #F4C20B; }
.cm-s-rubyblue span.CodeMirror-matchingbracket { color:#F0F !important; }
.cm-s-rubyblue span.cm-builtin, .cm-s-rubyblue span.cm-special { color: #FF9D00; }
.cm-s-rubyblue span.cm-error { color: #AF2018; }

.cm-s-rubyblue .CodeMirror-activeline-background {background: #173047 !important;}
/*
Solarized theme for code-mirror
http://ethanschoonover.com/solarized
*/

/*
Solarized color pallet
http://ethanschoonover.com/solarized/img/solarized-palette.png
*/

.solarized.base03 { color: #002b36; }
.solarized.base02 { color: #073642; }
.solarized.base01 { color: #586e75; }
.solarized.base00 { color: #657b83; }
.solarized.base0 { color: #839496; }
.solarized.base1 { color: #93a1a1; }
.solarized.base2 { color: #eee8d5; }
.solarized.base3  { color: #fdf6e3; }
.solarized.solar-yellow  { color: #b58900; }
.solarized.solar-orange  { color: #cb4b16; }
.solarized.solar-red { color: #dc322f; }
.solarized.solar-magenta { color: #d33682; }
.solarized.solar-violet  { color: #6c71c4; }
.solarized.solar-blue { color: #268bd2; }
.solarized.solar-cyan { color: #2aa198; }
.solarized.solar-green { color: #859900; }

/* Color scheme for code-mirror */

.cm-s-solarized {
  line-height: 1.45em;
  color-profile: sRGB;
  rendering-intent: auto;
}
.cm-s-solarized.cm-s-dark {
  color: #839496;
  background-color:  #002b36;
  text-shadow: #002b36 0 1px;
}
.cm-s-solarized.cm-s-light {
  background-color: #fdf6e3;
  color: #657b83;
  text-shadow: #eee8d5 0 1px;
}

.cm-s-solarized .CodeMirror-widget {
  text-shadow: none;
}


.cm-s-solarized .cm-keyword { color: #cb4b16 }
.cm-s-solarized .cm-atom { color: #d33682; }
.cm-s-solarized .cm-number { color: #d33682; }
.cm-s-solarized .cm-def { color: #2aa198; }

.cm-s-solarized .cm-variable { color: #839496; }
.cm-s-solarized .cm-variable-2 { color: #b58900; }
.cm-s-solarized .cm-variable-3 { color: #6c71c4; }

.cm-s-solarized .cm-property { color: #2aa198; }
.cm-s-solarized .cm-operator {color: #6c71c4;}

.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; }

.cm-s-solarized .cm-string { color: #859900; }
.cm-s-solarized .cm-string-2 { color: #b58900; }

.cm-s-solarized .cm-meta { color: #859900; }
.cm-s-solarized .cm-qualifier { color: #b58900; }
.cm-s-solarized .cm-builtin { color: #d33682; }
.cm-s-solarized .cm-bracket { color: #cb4b16; }
.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }
.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }
.cm-s-solarized .cm-tag { color: #93a1a1 }
.cm-s-solarized .cm-attribute {  color: #2aa198; }
.cm-s-solarized .cm-header { color: #586e75; }
.cm-s-solarized .cm-quote { color: #93a1a1; }
.cm-s-solarized .cm-hr {
  color: transparent;
  border-top: 1px solid #586e75;
  display: block;
}
.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }
.cm-s-solarized .cm-special { color: #6c71c4; }
.cm-s-solarized .cm-em {
  color: #999;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.cm-s-solarized .cm-strong { color: #eee; }
.cm-s-solarized .cm-error,
.cm-s-solarized .cm-invalidchar {
  color: #586e75;
  border-bottom: 1px dotted #dc322f;
}

.cm-s-solarized.cm-s-dark .CodeMirror-selected { background: #073642; }
.cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); }
.cm-s-solarized.cm-s-dark.CodeMirror ::-moz-selection { background: rgba(7, 54, 66, 0.99); }

.cm-s-solarized.cm-s-light .CodeMirror-selected { background: #eee8d5; }
.cm-s-solarized.cm-s-light.CodeMirror ::selection { background: #eee8d5; }
.cm-s-solarized.cm-s-lightCodeMirror ::-moz-selection { background: #eee8d5; }

/* Editor styling */



/* Little shadow on the view-port of the buffer view */
.cm-s-solarized.CodeMirror {
  -moz-box-shadow: inset 7px 0 12px -6px #000;
  -webkit-box-shadow: inset 7px 0 12px -6px #000;
  box-shadow: inset 7px 0 12px -6px #000;
}

/* Gutter border and some shadow from it  */
.cm-s-solarized .CodeMirror-gutters {
  border-right: 1px solid;
}

/* Gutter colors and line number styling based of color scheme (dark / light) */

/* Dark */
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color:  #002b36;
  border-color: #00232c;
}

.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
  text-shadow: #021014 0 -1px;
}

/* Light */
.cm-s-solarized.cm-s-light .CodeMirror-gutters {
  background-color: #fdf6e3;
  border-color: #eee8d5;
}

/* Common */
.cm-s-solarized .CodeMirror-linenumber {
  color: #586e75;
  padding: 0 5px;
}
.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }

.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
  color: #586e75;
}

.cm-s-solarized .CodeMirror-lines .CodeMirror-cursor {
  border-left: 1px solid #819090;
}

/*
Active line. Negative margin compensates left padding of the text in the
view-port
*/
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.10);
}
.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
  background: rgba(0, 0, 0, 0.10);
}
.cm-s-the-matrix.CodeMirror { background: #000000; color: #00FF00; }
.cm-s-the-matrix div.CodeMirror-selected { background: #2D2D2D !important; }
.cm-s-the-matrix.CodeMirror ::selection { background: rgba(45, 45, 45, 0.99); }
.cm-s-the-matrix.CodeMirror ::-moz-selection { background: rgba(45, 45, 45, 0.99); }
.cm-s-the-matrix .CodeMirror-gutters { background: #060; border-right: 2px solid #00FF00; }
.cm-s-the-matrix .CodeMirror-guttermarker { color: #0f0; }
.cm-s-the-matrix .CodeMirror-guttermarker-subtle { color: white; }
.cm-s-the-matrix .CodeMirror-linenumber { color: #FFFFFF; }
.cm-s-the-matrix .CodeMirror-cursor { border-left: 1px solid #00FF00 !important; }

.cm-s-the-matrix span.cm-keyword {color: #008803; font-weight: bold;}
.cm-s-the-matrix span.cm-atom {color: #3FF;}
.cm-s-the-matrix span.cm-number {color: #FFB94F;}
.cm-s-the-matrix span.cm-def {color: #99C;}
.cm-s-the-matrix span.cm-variable {color: #F6C;}
.cm-s-the-matrix span.cm-variable-2 {color: #C6F;}
.cm-s-the-matrix span.cm-variable-3 {color: #96F;}
.cm-s-the-matrix span.cm-property {color: #62FFA0;}
.cm-s-the-matrix span.cm-operator {color: #999}
.cm-s-the-matrix span.cm-comment {color: #CCCCCC;}
.cm-s-the-matrix span.cm-string {color: #39C;}
.cm-s-the-matrix span.cm-meta {color: #C9F;}
.cm-s-the-matrix span.cm-qualifier {color: #FFF700;}
.cm-s-the-matrix span.cm-builtin {color: #30a;}
.cm-s-the-matrix span.cm-bracket {color: #cc7;}
.cm-s-the-matrix span.cm-tag {color: #FFBD40;}
.cm-s-the-matrix span.cm-attribute {color: #FFF700;}
.cm-s-the-matrix span.cm-error {color: #FF0000;}

.cm-s-the-matrix .CodeMirror-activeline-background {background: #040;}
/*

    Name:       Tomorrow Night - Bright
    Author:     Chris Kempson

    Port done by Gerard Braad <me@gbraad.nl>

*/

.cm-s-tomorrow-night-bright.CodeMirror {background: #000000; color: #eaeaea;}
.cm-s-tomorrow-night-bright div.CodeMirror-selected {background: #424242 !important;}
.cm-s-tomorrow-night-bright .CodeMirror-gutters {background: #000000; border-right: 0px;}
.cm-s-tomorrow-night-bright .CodeMirror-guttermarker { color: #e78c45; }
.cm-s-tomorrow-night-bright .CodeMirror-guttermarker-subtle { color: #777; }
.cm-s-tomorrow-night-bright .CodeMirror-linenumber {color: #424242;}
.cm-s-tomorrow-night-bright .CodeMirror-cursor {border-left: 1px solid #6A6A6A !important;}

.cm-s-tomorrow-night-bright span.cm-comment {color: #d27b53;}
.cm-s-tomorrow-night-bright span.cm-atom {color: #a16a94;}
.cm-s-tomorrow-night-bright span.cm-number {color: #a16a94;}

.cm-s-tomorrow-night-bright span.cm-property, .cm-s-tomorrow-night-bright span.cm-attribute {color: #99cc99;}
.cm-s-tomorrow-night-bright span.cm-keyword {color: #d54e53;}
.cm-s-tomorrow-night-bright span.cm-string {color: #e7c547;}

.cm-s-tomorrow-night-bright span.cm-variable {color: #b9ca4a;}
.cm-s-tomorrow-night-bright span.cm-variable-2 {color: #7aa6da;}
.cm-s-tomorrow-night-bright span.cm-def {color: #e78c45;}
.cm-s-tomorrow-night-bright span.cm-bracket {color: #eaeaea;}
.cm-s-tomorrow-night-bright span.cm-tag {color: #d54e53;}
.cm-s-tomorrow-night-bright span.cm-link {color: #a16a94;}
.cm-s-tomorrow-night-bright span.cm-error {background: #d54e53; color: #6A6A6A;}

.cm-s-tomorrow-night-bright .CodeMirror-activeline-background {background: #2a2a2a !important;}
.cm-s-tomorrow-night-bright .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
/*

    Name:       Tomorrow Night - Eighties
    Author:     Chris Kempson

    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)

*/

.cm-s-tomorrow-night-eighties.CodeMirror {background: #000000; color: #CCCCCC;}
.cm-s-tomorrow-night-eighties div.CodeMirror-selected {background: #2D2D2D !important;}
.cm-s-tomorrow-night-eighties.CodeMirror ::selection { background: rgba(45, 45, 45, 0.99); }
.cm-s-tomorrow-night-eighties.CodeMirror ::-moz-selection { background: rgba(45, 45, 45, 0.99); }
.cm-s-tomorrow-night-eighties .CodeMirror-gutters {background: #000000; border-right: 0px;}
.cm-s-tomorrow-night-eighties .CodeMirror-guttermarker { color: #f2777a; }
.cm-s-tomorrow-night-eighties .CodeMirror-guttermarker-subtle { color: #777; }
.cm-s-tomorrow-night-eighties .CodeMirror-linenumber {color: #515151;}
.cm-s-tomorrow-night-eighties .CodeMirror-cursor {border-left: 1px solid #6A6A6A !important;}

.cm-s-tomorrow-night-eighties span.cm-comment {color: #d27b53;}
.cm-s-tomorrow-night-eighties span.cm-atom {color: #a16a94;}
.cm-s-tomorrow-night-eighties span.cm-number {color: #a16a94;}

.cm-s-tomorrow-night-eighties span.cm-property, .cm-s-tomorrow-night-eighties span.cm-attribute {color: #99cc99;}
.cm-s-tomorrow-night-eighties span.cm-keyword {color: #f2777a;}
.cm-s-tomorrow-night-eighties span.cm-string {color: #ffcc66;}

.cm-s-tomorrow-night-eighties span.cm-variable {color: #99cc99;}
.cm-s-tomorrow-night-eighties span.cm-variable-2 {color: #6699cc;}
.cm-s-tomorrow-night-eighties span.cm-def {color: #f99157;}
.cm-s-tomorrow-night-eighties span.cm-bracket {color: #CCCCCC;}
.cm-s-tomorrow-night-eighties span.cm-tag {color: #f2777a;}
.cm-s-tomorrow-night-eighties span.cm-link {color: #a16a94;}
.cm-s-tomorrow-night-eighties span.cm-error {background: #f2777a; color: #6A6A6A;}

.cm-s-tomorrow-night-eighties .CodeMirror-activeline-background {background: #343600 !important;}
.cm-s-tomorrow-night-eighties .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
.cm-s-twilight.CodeMirror { background: #141414; color: #f7f7f7; } /**/
.cm-s-twilight .CodeMirror-selected { background: #323232 !important; } /**/
.cm-s-twilight.CodeMirror ::selection { background: rgba(50, 50, 50, 0.99); }
.cm-s-twilight.CodeMirror ::-moz-selection { background: rgba(50, 50, 50, 0.99); }

.cm-s-twilight .CodeMirror-gutters { background: #222; border-right: 1px solid #aaa; }
.cm-s-twilight .CodeMirror-guttermarker { color: white; }
.cm-s-twilight .CodeMirror-guttermarker-subtle { color: #aaa; }
.cm-s-twilight .CodeMirror-linenumber { color: #aaa; }
.cm-s-twilight .CodeMirror-cursor { border-left: 1px solid white !important; }

.cm-s-twilight .cm-keyword {  color: #f9ee98; } /**/
.cm-s-twilight .cm-atom { color: #FC0; }
.cm-s-twilight .cm-number { color:  #ca7841; } /**/
.cm-s-twilight .cm-def { color: #8DA6CE; }
.cm-s-twilight span.cm-variable-2, .cm-s-twilight span.cm-tag { color: #607392; } /**/
.cm-s-twilight span.cm-variable-3, .cm-s-twilight span.cm-def { color: #607392; } /**/
.cm-s-twilight .cm-operator { color: #cda869; } /**/
.cm-s-twilight .cm-comment { color:#777; font-style:italic; font-weight:normal; } /**/
.cm-s-twilight .cm-string { color:#8f9d6a; font-style:italic; } /**/
.cm-s-twilight .cm-string-2 { color:#bd6b18 } /*?*/
.cm-s-twilight .cm-meta { background-color:#141414; color:#f7f7f7; } /*?*/
.cm-s-twilight .cm-builtin { color: #cda869; } /*?*/
.cm-s-twilight .cm-tag { color: #997643; } /**/
.cm-s-twilight .cm-attribute { color: #d6bb6d; } /*?*/
.cm-s-twilight .cm-header { color: #FF6400; }
.cm-s-twilight .cm-hr { color: #AEAEAE; }
.cm-s-twilight .cm-link {   color:#ad9361; font-style:italic; text-decoration:none; } /**/
.cm-s-twilight .cm-error { border-bottom: 1px solid red; }

.cm-s-twilight .CodeMirror-activeline-background {background: #27282E !important;}
.cm-s-twilight .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
/* Taken from the popular Visual Studio Vibrant Ink Schema */

.cm-s-vibrant-ink.CodeMirror { background: black; color: white; }
.cm-s-vibrant-ink .CodeMirror-selected { background: #35493c !important; }
.cm-s-vibrant-ink.CodeMirror ::selection { background: rgba(53, 73, 60, 0.99); }
.cm-s-vibrant-ink.CodeMirror ::-moz-selection { background: rgba(53, 73, 60, 0.99); }

.cm-s-vibrant-ink .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
.cm-s-vibrant-ink .CodeMirror-guttermarker { color: white; }
.cm-s-vibrant-ink .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-vibrant-ink .CodeMirror-linenumber { color: #d0d0d0; }
.cm-s-vibrant-ink .CodeMirror-cursor { border-left: 1px solid white !important; }

.cm-s-vibrant-ink .cm-keyword {  color: #CC7832; }
.cm-s-vibrant-ink .cm-atom { color: #FC0; }
.cm-s-vibrant-ink .cm-number { color:  #FFEE98; }
.cm-s-vibrant-ink .cm-def { color: #8DA6CE; }
.cm-s-vibrant-ink span.cm-variable-2, .cm-s-vibrant span.cm-tag { color: #FFC66D }
.cm-s-vibrant-ink span.cm-variable-3, .cm-s-vibrant span.cm-def { color: #FFC66D }
.cm-s-vibrant-ink .cm-operator { color: #888; }
.cm-s-vibrant-ink .cm-comment { color: gray; font-weight: bold; }
.cm-s-vibrant-ink .cm-string { color:  #A5C25C }
.cm-s-vibrant-ink .cm-string-2 { color: red }
.cm-s-vibrant-ink .cm-meta { color: #D8FA3C; }
.cm-s-vibrant-ink .cm-builtin { color: #8DA6CE; }
.cm-s-vibrant-ink .cm-tag { color: #8DA6CE; }
.cm-s-vibrant-ink .cm-attribute { color: #8DA6CE; }
.cm-s-vibrant-ink .cm-header { color: #FF6400; }
.cm-s-vibrant-ink .cm-hr { color: #AEAEAE; }
.cm-s-vibrant-ink .cm-link { color: blue; }
.cm-s-vibrant-ink .cm-error { border-bottom: 1px solid red; }

.cm-s-vibrant-ink .CodeMirror-activeline-background {background: #27282E !important;}
.cm-s-vibrant-ink .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
/*
Copyright (C) 2011 by MarkLogic Corporation
Author: Mike Brevoort <mike@brevoort.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
.cm-s-xq-dark.CodeMirror { background: #0a001f; color: #f8f8f8; }
.cm-s-xq-dark .CodeMirror-selected { background: #27007A !important; }
.cm-s-xq-dark.CodeMirror ::selection { background: rgba(39, 0, 122, 0.99); }
.cm-s-xq-dark.CodeMirror ::-moz-selection { background: rgba(39, 0, 122, 0.99); }
.cm-s-xq-dark .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
.cm-s-xq-dark .CodeMirror-guttermarker { color: #FFBD40; }
.cm-s-xq-dark .CodeMirror-guttermarker-subtle { color: #f8f8f8; }
.cm-s-xq-dark .CodeMirror-linenumber { color: #f8f8f8; }
.cm-s-xq-dark .CodeMirror-cursor { border-left: 1px solid white !important; }

.cm-s-xq-dark span.cm-keyword {color: #FFBD40;}
.cm-s-xq-dark span.cm-atom {color: #6C8CD5;}
.cm-s-xq-dark span.cm-number {color: #164;}
.cm-s-xq-dark span.cm-def {color: #FFF; text-decoration:underline;}
.cm-s-xq-dark span.cm-variable {color: #FFF;}
.cm-s-xq-dark span.cm-variable-2 {color: #EEE;}
.cm-s-xq-dark span.cm-variable-3 {color: #DDD;}
.cm-s-xq-dark span.cm-property {}
.cm-s-xq-dark span.cm-operator {}
.cm-s-xq-dark span.cm-comment {color: gray;}
.cm-s-xq-dark span.cm-string {color: #9FEE00;}
.cm-s-xq-dark span.cm-meta {color: yellow;}
.cm-s-xq-dark span.cm-qualifier {color: #FFF700;}
.cm-s-xq-dark span.cm-builtin {color: #30a;}
.cm-s-xq-dark span.cm-bracket {color: #cc7;}
.cm-s-xq-dark span.cm-tag {color: #FFBD40;}
.cm-s-xq-dark span.cm-attribute {color: #FFF700;}
.cm-s-xq-dark span.cm-error {color: #f00;}

.cm-s-xq-dark .CodeMirror-activeline-background {background: #27282E !important;}
.cm-s-xq-dark .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}/*
Copyright (C) 2011 by MarkLogic Corporation
Author: Mike Brevoort <mike@brevoort.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
.cm-s-xq-light span.cm-keyword {line-height: 1em; font-weight: bold; color: #5A5CAD; }
.cm-s-xq-light span.cm-atom {color: #6C8CD5;}
.cm-s-xq-light span.cm-number {color: #164;}
.cm-s-xq-light span.cm-def {text-decoration:underline;}
.cm-s-xq-light span.cm-variable {color: black; }
.cm-s-xq-light span.cm-variable-2 {color:black;}
.cm-s-xq-light span.cm-variable-3 {color: black; }
.cm-s-xq-light span.cm-property {}
.cm-s-xq-light span.cm-operator {}
.cm-s-xq-light span.cm-comment {color: #0080FF; font-style: italic;}
.cm-s-xq-light span.cm-string {color: red;}
.cm-s-xq-light span.cm-meta {color: yellow;}
.cm-s-xq-light span.cm-qualifier {color: grey}
.cm-s-xq-light span.cm-builtin {color: #7EA656;}
.cm-s-xq-light span.cm-bracket {color: #cc7;}
.cm-s-xq-light span.cm-tag {color: #3F7F7F;}
.cm-s-xq-light span.cm-attribute {color: #7F007F;}
.cm-s-xq-light span.cm-error {color: #f00;}

.cm-s-xq-light .CodeMirror-activeline-background {background: #e8f2ff !important;}
.cm-s-xq-light .CodeMirror-matchingbracket {outline:1px solid grey;color:black !important;background:yellow;}/**
 * "
 *  Using Zenburn color palette from the Emacs Zenburn Theme
 *  https://github.com/bbatsov/zenburn-emacs/blob/master/zenburn-theme.el
 *
 *  Also using parts of https://github.com/xavi/coderay-lighttable-theme
 * "
 * From: https://github.com/wisenomad/zenburn-lighttable-theme/blob/master/zenburn.css
 */

.cm-s-zenburn .CodeMirror-gutters { background: #3f3f3f !important; }
.cm-s-zenburn .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { color: #999; }
.cm-s-zenburn .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-zenburn { background-color: #3f3f3f; color: #dcdccc; }
.cm-s-zenburn span.cm-builtin { color: #dcdccc; font-weight: bold; }
.cm-s-zenburn span.cm-comment { color: #7f9f7f; }
.cm-s-zenburn span.cm-keyword { color: #f0dfaf; font-weight: bold; }
.cm-s-zenburn span.cm-atom { color: #bfebbf; }
.cm-s-zenburn span.cm-def { color: #dcdccc; }
.cm-s-zenburn span.cm-variable { color: #dfaf8f; }
.cm-s-zenburn span.cm-variable-2 { color: #dcdccc; }
.cm-s-zenburn span.cm-string { color: #cc9393; }
.cm-s-zenburn span.cm-string-2 { color: #cc9393; }
.cm-s-zenburn span.cm-number { color: #dcdccc; }
.cm-s-zenburn span.cm-tag { color: #93e0e3; }
.cm-s-zenburn span.cm-property { color: #dfaf8f; }
.cm-s-zenburn span.cm-attribute { color: #dfaf8f; }
.cm-s-zenburn span.cm-qualifier { color: #7cb8bb; }
.cm-s-zenburn span.cm-meta { color: #f0dfaf; }
.cm-s-zenburn span.cm-header { color: #f0efd0; }
.cm-s-zenburn span.cm-operator { color: #f0efd0; }
.cm-s-zenburn span.CodeMirror-matchingbracket { box-sizing: border-box; background: transparent; border-bottom: 1px solid; }
.cm-s-zenburn span.CodeMirror-nonmatchingbracket { border-bottom: 1px solid; background: none; }
.cm-s-zenburn .CodeMirror-activeline { background: #000000; }
.cm-s-zenburn .CodeMirror-activeline-background { background: #000000; }
.cm-s-zenburn .CodeMirror-selected { background: #545454; }
.cm-s-zenburn .CodeMirror-focused .CodeMirror-selected { background: #4f4f4f; }







/* Don't you dare to write any css code above this line!! */
/* === /end CodeMirror === */

/* =============================================================================
   JS Bin
   ========================================================================== */

/* Common */
.cm-s-solarized .CodeMirror-linenumber {
  color: rgba(88, 110, 117, 0.3);
}


html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-size: 13px;
  /*min-width: 976px;*/
  overflow: hidden;
  /*background: url(../images/jsbin-bg.gif) repeat-x 0 -10px;*/
  background: #fff url(../images/jsbin_animated.gif) no-repeat center;
  height: 100%;
}

/*
 * Pro styling
 */

#username .pro {
  font-size: 12px;
  margin-left: 2px;
  color: #aaa;
}
/*
 *  End pro styling
 */

body.ready {
  background: #fff url(../images/jsbin_static.png) no-repeat center;
}

body.dave {
  background: #fff url(../images/logo.png) no-repeat center;
}

p {
  margin: 0;
}

td small {
  /*display: block;*/
  /*line-height: 14px;*/
  font-size: 12px;
}

input,
#sharemenu span /* stupid fix for IE9's custom font handling */ {
  font-family: "Helvetica Neue", Helvetica, Arial;
}

input[type=text],
input[type=email] {
  width: 95%;
}

input[type=button] {
  font-size: 16px !important;
  cursor: pointer !important;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus {
  border-color: hsl(206, 95%, 55%);
  outline: none;
}

.btn-github {
  font-size: 1.4em;
  font-weight: 200;
  background: #f0f0f0;
  background: linear-gradient(0deg, #f0f0f0, #fefefe);
  box-shadow: 0px 1px 1px #eee;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 10px 12px;
  cursor: pointer;
  display: inline;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border-bottom: 2px solid #aaa;
}
.btn-github:hover {
  background: linear-gradient(0deg, #e8e8e8, #f8f8f8);
}

.btn-github img {
  vertical-align: middle;
  top: -2px;
  position: relative;
  margin-right: 2px;
  border: none;
  width: 22px;
  /* display: inline-block; */
  /* float: left; */
}

.login .btn-github {
  display: block;
  width: 100%;
}

.login-splitter {
  display: block;
  font-style: italic;
  text-align: center;
}

[hidden],
.hidden {
  display: none !important;
}

#control {
  z-index: 10000;
  /*min-width: 760px;*/
  height: 35px;
  position: absolute;
/*  width: 100%;*/
  left: 0;
  right: 0;
  border-bottom: 1px solid #aaa;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.15))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0, rgba(0,0,0,0.15) 100%); /* Chrome10+,Safari5.1+ */
  background:    -moz-linear-gradient(top, rgba(0,0,0,0) 0, rgba(0,0,0,0.15) 100%); /* FF3.6+ */
  background:      -o-linear-gradient(top, rgba(0,0,0,0) 0, rgba(0,0,0,0.15) 100%); /* Opera 11.10+ */
  background:         linear-gradient(top, rgba(0,0,0,0) 0, rgba(0,0,0,0.15) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#26000000',GradientType=0 ); /* IE6-9 */
  background-color: #FFF;

}


#control, .label, #tip, #toppanel, .ready #toppanel .toppanel-column-first {
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: -moz-none; /* if this is "none" you can't copy text */
      -ms-user-select: none;
          user-select: none;
  /* padding-left: 4px; */
}

/* total faff, not sure why, but jsbin loads and selects all the text :-\ */
.ready #toppanel {
  -webkit-user-select: initial;
   -khtml-user-select: initial;
     -moz-user-select: initial;
      -ms-user-select: initial;
          user-select: initial;
}

.control, .help, .starting {
/*  width: 100px;*/

  float: left;
  white-space: nowrap;
}

.control {
  padding-right: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

.starting {
  text-align: center;
}

#info {
  min-width: 200px;
  position: relative;
}

.help {
/*  width: 10%;*/
  /*min-width: 134px;*/
  text-align: right;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}
.help .login-group {
  width: 100%;
  display: block;
  text-align: center;
  font-weight: 400;
  color: #aaa;
  font-size: 1.1em;
  margin-top: 15px;
}
.btn-login span {
  color: #aaa;
  /* font-size: 1em; */
}
.help a {
  outline: 0;
  /*border-right: 0;*/
}

.help li {
  line-height: 24px;
  list-style: none;
}

.help ul {
  margin: 0;
/*   margin-top: 10px; */
}

.help li a {
  font-size: 13px;
  display: block;
  text-decoration: none;
}

.help li:last-child a {
  color: #999;
  font-size: 11px;
  /* text-align: right; */
  display: inline;
  /* position: absolute; */
  right: 5px;
  bottom: 5px;
  /* padding: 10px 10px 0 10px; */
}

.help li a:hover {
  text-decoration: underline;
  color: #000;
}

.help strong a {
  text-decoration: none;
  display: block;
}

.starting, .help {
  z-index: 1;
  line-height: 25px;
}

ul.flat {
  margin: 0;
  padding: 0;
}

ul.flat li {
  float: left;
  display: block;
  list-style: none;
  margin: 0 0 0 15px;
  padding: 0;
}

.help ul.flat {
  float: right;
}

#control > *, a {
  color: #232323;
/*   text-shadow: #fff 0 1px 1px; */
}

a:hover {
  text-shadow: white 1px 1px 1px;
}

.light {
  font-weight: normal;
  text-decoration: none;
}

.stretch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#bin {
  top: 36px;
  width: 100%;
  z-index: 2;
  display: none;
}

.panelsVisible #bin {
  display: block;
}

.resize {
  cursor: ew-resize;
  background: #ccc url() no-repeat 25% 45%;
  -webkit-transition: opacity ease-in 50ms;
     -moz-transition: opacity ease-in 50ms;
       -o-transition: opacity ease-in 50ms;
          transition: opacity ease-in 50ms;
}

.handle {
  bottom: 4px;
  margin-left: -16px;
  text-shadow: 1px 1px 1px #fff;
  color: #666;
}

.ie .resize {
  cursor: w-resize;
}

.block {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}

.ie .block {
  cursor: w-resize;
}

/*div.preview {
  display: none;
  width: 100%;
}
*/
#library {
  padding: 2px;
  right: 0;
  margin-left: 5px;
  position: absolute;
  top: -1px;
  left: -5px;
  opacity: 0;
  cursor: pointer;
  display: block;
  height: 37px;
  border: 1px solid #CCC;
  outline: none;
  width: 86px;
}

iframe.javascript {
  border-right: 1px solid #ccc !important;
}

.buttons {
  min-width: 732px;
  min-width: 100%;
  float: left;
  display: block;
}

.dropdownmenu a,
.button {
  position: relative;
  border: 1px solid transparent;
  border-top: 0;
  border-bottom: 0;

  height: 23px;
  line-height: 25px;
  padding: 6px 10px;
  display: inline-block;
  /*float: left;*/
  text-decoration: none;
  margin: 0 0;
  /*background: #fff;*/
  /*background: rgba(255, 255, 255, 0.3);*/
  font-size: 13px;
}

body.private #control a#private,
body.public #control a#public {
  display:none;
}

#panels .button,
.button:hover,
.button:active,
.open > .button {
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}

#panels .button {
  border-left: 0;
}

.dropdownmenu .button {
  border-left: 0;
  border-right: 0;
}

/*#control span {
  display: block;
  float: left;
  height: 10px;
  padding-top: 4px;
  padding-bottom: 10px;
  line-height: 20px;
}*/

.gap {
  margin-right: 10px;
}

.dropdownmenu a:hover, .button:hover, a.hover {
  /*-moz-box-shadow: #fff 0 0 5px;*/
  background: rgba(0, 0, 0, 0.04);
  z-index: 1;
}

.disabled,
.disabled * {
  color: #999;
}

.dropdownmenu .disabled:hover,
.dropdownmenu .disabled.hover {
  background: transparent;
}

#sharemenu .disabled strong:after {
  content: ' click to activate';
  font-size: 10px;
  color: #999;
}

a.button:focus { /* , .button:active */
  -moz-box-shadow: #C8C8C8 0 0 3px;
  -webkit-box-shadow: #C8C8C8 0 0 3px;
     -moz-box-shadow: #C8C8C8 0 0 3px;
          box-shadow: #C8C8C8 0 0 3px;
  border-color: #fff;
  outline: 0;
  text-shadow: none;
}

/*body.source a.source,
body.preview a.preview {
  background: #aaa;
  background: rgba(0, 0, 0, 0.25);
  text-shadow: none;
  border: 1px solid #ccc;
  -webkit-box-shadow: #fff 0 0 5px;
     -moz-box-shadow: #fff 0 0 5px;
          box-shadow: #fff 0 0 5px;

  background-image:
    -webkit-gradient(
      radial,
      center center,
      0,
      center center,
      50,
      color-stop(0, #BFBFBF),
      color-stop(1, #949494)
    );

}*/

.control a.selected {
  background: #aaa;
  background: rgba(0, 0, 0, 0.25);
  text-shadow: none;
  border: 1px solid #ccc;
}

.group a.selected {
  background: #fff;
  border: 0;
  background-image: url(../images/check.png);
  background-repeat: no-repeat;
  background-position: 6px 9px;
}

.group a.selected:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body.preview a.preview {
  border-left: 0;
}

.left {
  border-left: 1px solid #ccc;
}

.right {
  border-right: 1px solid #ccc;
}

div.menu {
  margin-left: -1px;
  /*border-left: 1px solid #ccc;*/
  display: inline-block;
  /*width: 104px;*/
  position: relative;
  z-index: 20;
  padding: 0;
  /*overflow: hidden;*/
  float: left;
  top: 0;
}

.help .menu {
  /* float: left; */
}

span.menu {
  z-index: 20;
  position: relative;
  display: inline-block;
}

.code .menu {
  margin-left: 0;
  padding: 10px 100px 0 10px;
  display: block;
}

#control div.group > * {
  display: inline-block;
  float: none;
  padding: 6px 10px;
  text-align: center;
  font-weight: normal;
  text-decoration: none;
  position: relative;
  border: 0;
}

#control .group .title {
  padding-right: 40px;
}

#control div.group .button-dropdown  {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ccc;
}

#preview {
  z-index: 11; /* gets over the labels in IE */
}

#preview iframe,
#live iframe,
#console {
  height: 100%;
  width: 100%;
  border: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 35px;
}

.ie7 #live iframe {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 0;
}
.ie7 .editbox {
  left: 0;
}

body.source #preview {
  display: none;
}

body.preview #source {
  opacity: 0;
  filter:alpha(opacity=0);
}

body.preview #preview,
body.source #source {
  display: block;
}

body.preview #source select {
  display: none;
}

.overlay {
  z-index: 98;
  background: #000;
  background: rgba(255, 255, 255, 0.3);
}

.javascript-only div.javascript {
  width: 100%;
  left: 0;
}

.javascript-only div.html {
  display: none;
  left: 100%;
  width: 100%;
}

.label .show {
  display: none;
}

.javascript-only .label .hide,
.html-only .label .hide {
  display: none;
}

.javascript-only .label .show,
.html-only .label .show {
  display: inline;
}

.html-only div.javascript {
  left: -50%;
  display: none;
}

.html-only div.html {
  left: 0;
  width: 100%;
}

/* lightbox */
.lightboxWrapper {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
}

.overlay {
  opacity: 0.5;
  filter:alpha(opacity=50);
  background: #fff;
}

.lightbox {
  position: relative;
  z-index: 12;
/*  border: 10px solid #ccc;*/
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  -webkit-box-shadow: #666 0 0 5px;
     -moz-box-shadow: #666 0 0 5px;
          box-shadow: #666 0 0 5px;
  top: 75px;
  width: 80%;
  max-height: 65%;
}

.lightbox h1 {
  margin: 0;
  background: #000;
  padding: 20px;
  color: #fff;
  position: relative;
/*  width: 100%;*/
}

.lightbox p,
.lightbox h2,
.lightbox h3 {
  margin: 14px 20px;
}

.lightbox p,
.lightbox li {
  font-size: 16px;
}

.lightbox li {
  margin: 8px 0;
}

.video {
  padding-left: 20px;
  background: url(../images/play.gif) no-repeat left center;
}

#info {
  display: inline-block;
  background: url(../images/info.gif) no-repeat bottom left;
  color: #fff;
  font-weight: bold;
  font-style: italic;
  font-family: georgia;
  font-size: 10px;
  height: 14px;
  line-height: 14px;
  width: 14px;
  text-align: center;
  text-shadow: none;
}

#info:hover {
  background: url(../images/info.gif) no-repeat top left;
}

#startingpoint {
  outline: 0;
}

.mobile .editbox {
  top: 36px;
  width: auto;
  bottom: 0.8em;
  left: 0.8em;
  right: 0.8em;
}
.mobile .editbox textarea,
.ie6 .editbox textarea,
.ie7 .editbox textarea {
  margin: 0;
  border: 0;
  font-family: Menlo, Monaco, consolas, monospace;
  color: black;
  padding: 0;
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  resize: none;
  outline: none;
  -webkit-appearance: none;
  height: 100%;
}

.ie6 textarea,
.ie7 textarea {
  width: 100%;
  height: 100%;
}

#javascript {
  /*margin-top: 26px;*/
}

/*div.javascript {
  border-right: 1px solid #ccc;
}*/

/* tab based help pages */
#navigation {
  margin: 0;
  float: left;
  display: block;
  width: 200px;
  padding-left: 0;
  list-style: none;
}

#navigation li {
  margin: 1px 0;
}

#navigation a {
  background: #A2B2CC;
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  margin: 1px 0;
  text-shadow: none;
}

#navigation a:hover,
#navigation a.selected:hover {
  background: #89C;
  font-weight: bold;
}

#navigation a:active {
  border: 2px solid #647ECC;
  padding: 8px;
}

#navigation a.selected {
  background: #768BCC;
  font-weight: bold;
}

.panels {
  margin-left: 210px;
}

.panels li {
  margin: 14px 0;
}

.panels code {
  font-size: 16px;
}

/* hud - apply style hud */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: url(../images/op7.png) repeat;
}

.hud .outercontainer {
  background: #1B1B1B;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  color: #fff;
  position: relative;
}

.hud .title {
  text-align: center;
  text-shadow: #000 1px 1px 1px;
  background: #454645;
}

#revert {
  display: none;
}

#revert {
  /*display: inline-block;*/
  height: 23px;
}

#revert img {
  margin-top: 1px;
  margin-right: -1px;
  border: 0;
  vertical-align: top;
  padding-top: 3px;
}

#revert img.enabled {
  display: none;
}

#revert.enable img.disabled {
  display: none;
}

#revert.enable img.enabled {
  display: inline;
}

body.streaming {
  background-position: 0 11px;
}

#stream {
  display: none;
}

#streaming {
  display: block;
  top: -23px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 22px;
  color: #fff;
  font-weight: bold;
  line-height: 20px;
  text-shadow: #0A0 0 1px 0;
  background: #0c0;
  border-bottom: 1px solid #0a0;
  cursor: pointer;
}

#streaming .msg {
  padding-left: 15px;
}

#streaming a {
  text-shadow: #0A0 0 1px 0;
  color: #fff;
}

body.pausestream #streaming .pause {
  display: none;
}

body.streaming #streaming .resume {
  display: none;
}

body.pausestream #streaming .resume {
  display: inline;
}

#streaming .listen {
  display: none;
}

#streaming.listen .listen {
  display: inline;
}

body.pausestream #streaming {
  background: #c00;
  text-shadow: #a00 0 1px 0;
  border-bottom: 1px solid #a00;
}

body.pausestream #streaming a {
  text-shadow: #a00 0 1px 0;
}

body.streaming #streaming {
  top: 0;
}

body {
  -webkit-transition: background-position 100ms ease-out;
     -moz-transition: background-position 100ms ease-out;
       -o-transition: background-position 100ms ease-out;
          transition: background-position 100ms ease-out;
}

#streaming, #control, #bin {
  -webkit-transition: top 100ms ease-out, opacity 50ms linear;
     -moz-transition: top 100ms ease-out, opacity 50ms linear;
       -o-transition: top 100ms ease-out, opacity 50ms linear;
          transition: top 100ms ease-out, opacity 50ms linear;
}

body.streaming #control,
body.streaming #help {
  top: 22px;
}

body.streaming #bin {
  top: 73px;
}

/* simplified for that poor old dog: IE6 */
.ie6 .help,
.ie6 #help {
  display: none;
}

.ie6 .buttons a {
  color: #000;
}

.ie6 div,
.ie6, li {
  zoom: 1;
}

.ie6 textarea {
  border: 5px solid #ccc;
  z-index: 9999;
  display: block;
  opacity: 1;
  filter: alpha(opacity=1);
  outline: 1px solid #000;
  color: #000;
}

.ie6, .ie6 * {
  height: 100%;
}

#jslabel em {
  color: #a00;
  font-weight: normal;
  font-style: normal;
  font-size: 11px;
  padding: 2px;
  padding-left: 5px;
}

#startingpoint.button.saved {
  /*background-image: url(../images/tick.png);*/
  background-repeat: no-repeat;
  background-position: 8px 7px;
}

.button.download {
  position: relative;
}

.button.download:before {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 6px;
  font-weight: normal;

  /*padding-left: 24px;*/
  /*background-image: url(/images/arrow_down_12x12.png);*/
  /*background-image: url(../images/download.png);*/
  /*background-repeat: no-repeat;*/
  /*background-position: 4px -33px;*/
}

#panelsvisible a {
  padding-right: 20px;
  background-image: url(../images/x_7x7.png);
  background-repeat: no-repeat;
  background-position: 91% 10px;
}


/* attempt to get a live render preview in */
#live {
  /*display: none;*/
  /*top: 60%;*/
  /*border-top: 1px solid #ccc;*/
  /*background: white;*/
  z-index: 9999;
}

.live #live {
  display: block;
}

.preview #live {
  display: none;
}

.live #source {
  bottom: 40%;
}

#live {
  border-top: 0;
}

.live #source {
  bottom: 0;
  right: 0;
}

.CodeMirror-completions {
  position: absolute;
  overflow: hidden;
  border: 2px solid #DFE0B4;
  z-index: 9999999999;
}

.CodeMirror-completions select {
  margin: 0;
  padding: 0;
  outline: none !important;
  background: #FFFFDB;
  border: 0;
  font-family: SourceCodeProRegular, Monaco, consolas, monospace;
  font-size: 13px;
}

.CodeMirror-dialog {
  border-bottom-color: #E6E6E6;
  z-index: 20;
}

.showtip #bin {
  /*bottom: 26px;*/
}

#tip {
  z-index: 100;
  display: none;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0;
  font-size: 14px;
  line-height: 22px;
  background: #fdfece;
  left: 0;
  right: 0;
  padding: 2px 10px 2px 10px;
  -webkit-animation: tip-flash 100ms linear 4 alternate;
  -moz-animation: tip-flash 100ms linear 4 alternate;
  -ms-animation: tip-flash 100ms linear 4 alternate;
  -o-animation: tip-flash 100ms linear 4 alternate;
  animation: tip-flash 100ms linear 4 alternate;

  -webkit-transition: bottom 100ms linear;
  transition: bottom 100ms linear;
}

@-webkit-keyframes tip-flash {
  to {
    background: white;
  }
}
@-moz-keyframes tip-flash {
  to {
    background: white;
  }
}
@-ms-keyframes tip-flash {
  to {
    background: white;
  }
}
@-o-keyframes tip-flash {
  to {
    background: white;
  }
}
@keyframes tip-flash {
  to {
    background: white;
  }
}

#tip.error {
  background: #FF4136;
  color: #fff;
}

.error a {
  color: #fff;
  text-shadow: none;
}

#tip.notification,
#tip.error {
  bottom: auto;
  top: 34px;
  line-height: 28px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

#tip p {
  margin: 5px 25px 5px 0;
  padding: 0 65px 0 0;
  line-height: 1.3;
}

#tip a.dismiss {
  line-height: 28px;
  position: absolute;
  right: 20px;
  top: 2px;
  text-decoration: none;
  text-shadow: none;
}

.showtip #tip {
  display: block;
}

#bin .details, #bin details {
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 12px;
  background: #FEE0E0;
  color: #bb0000;
  z-index: 10;
}

#bin .summary, #bin summary {
  cursor: pointer;
  padding: 3px 5px;
  display: block;
  font-weight: bold;
  background: #FC9B9F;
  border: 0;
}

#bin details ol, #bin .details ol {
  padding-left: 21px;
  max-height: 150px;
  overflow: auto;
}

#bin details li, #bin .details li {
  margin: 5px 0;
  cursor: pointer;
}

.keyboardHelp #keyboardHelp {
  display: block;
  z-index: 999999;
}

.urlHelp #urlHelp {
  display: block;
}

.modal > div {
  width: 600px;
  margin: 5% auto;
  box-shadow: 0 5px 80px #3D3D3D;
  max-width: 600px;
}

.modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 1000; /* gosh that's a stupid number */

  /*background: #000;*/
  /*background: rgba(0,0,0,0.85);*/
  /*background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));*/

  /*background-color: #000;*/
  background: rgba(0,0,0,0.15);
  /*
  background: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%,rgba(0, 0, 0, 0.7) 100%);
  background:    -moz-radial-gradient(50% 50%, ellipse cover, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 33%,rgba(0, 0, 0, 0.7) 100%);
  background:      -o-radial-gradient(50% 50%, ellipse cover, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 33%,rgba(0, 0, 0, 0.7) 100%);
  background:         radial-gradient(50% 50%, ellipse cover, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 33%,rgba(0, 0, 0, 0.7) 100%);
  */

  color: #fff;
  font-size: 16px;
  overflow: auto;
}

.modal table, .modal h2 {
  margin: 20px auto;
  padding: 20px;
  max-width: 600px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff;
  color: #333;
}

.modal h2 {
  margin-top: 5%;
  margin-bottom: 0;
  padding-bottom: 0;
}

.modal table {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: 0;
  width: 600px;
  border-spacing: 0;
}

.modal table td {
  border: 2px solid white;
}

.modal thead th {
  text-align: left;
}

.modal tbody tr {
  height: 30px;
}

.modal tbody td:first-child {
  font-family: SourceCodeProRegular, Menlo, Monaco, consolas, monospace;
  padding-right: 20px;
  color: blue;
}

.modal tbody td small {
  color: #333;
}

.modal .shortcut {
  width: 260px;
}

.modal a {
  color: #616161;
  text-shadow: none;
}

.modal table tbody tr:hover {
  background: #f3f3f3;
}

.modal table tbody tr:hover td {
  border: 2px solid #f3f3f3;
}

#login, #register {
  position: absolute;
  right: -10px;
}

.dropdowncontent {
  /*background: #e0e0e0;*/
  padding: 10px;
  min-width: 250px;
}

#register p {
  margin-top: 0;
  font-size: 12px;
  white-space: normal;
  line-height: 18px;
}

#lostpass {
  font-size: 11px;
}

form {
  margin: 0;
}

form div {
  padding-top: 5px;
}

form div:first-child {
  margin-top: 0;
}

form label {
  display: block;
  /*font-size: 12px;*/
  margin-left: 2px;
  line-height: 20px;
  font-weight: bold;
  color: #777;
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
textarea,
.input {
  border: 2px solid #b7dffd;
  width: 95%;
  font-size: 18px;
}

.input {
  display: block;
  font-weight: normal;
  border: 0;
  color: #000;
}

[readonly] {
  border: 0 !important;
}

#sharemenu textarea {
  font-family: "Helvetica Neue", Helvetica, Arial;
  /* resize: none; */
  font-size: 14px;
  /* height: 90px; */
}

#sharemenu textarea:focus {
  /* height: 90px; */
}

input {
  font-size: 16px;
}

/*
#login > div {
  margin: 20px auto;
  margin-top: 5%;
  padding: 20px;
  width: 380px;
  background: #000;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 80px #505050;
     -moz-box-shadow: 0 5px 80px #505050;
          box-shadow: none;
}

#login h2 {
  margin-top: 0;
  padding: 0;
  background: transparent;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

#login form div {
  margin: 10px;
}

#login form div label {
  float: left;
  display: block;
  width: 100px;
  line-height: 28px;
  text-align: right;
  margin-right: 10px;
}

#login form input {
  font-family: sans-serif;
  padding: 2px;
  font-size: 14px;
}

#login form input[type=submit] {
  font-size: 18px;
}

#login p {
  font-size: 13px;
}

*/

.loginFeedback {
  display: none;
  padding: 3px;
  background: #EFF3B6;
  background: rgba(255, 253, 0, 0.2);
  border: 1px solid rgb(219, 225, 45);
  margin: 0;
  white-space: normal;
  line-height: 18px;
}

/*@media (max-height: 770px) {*/
.hideheader.ready #control {
  border-bottom: 6px solid #AAA;
  -webkit-transition: top ease-out 100ms, border-bottom ease-out 100ms;
     -moz-transition: top ease-out 100ms, border-bottom ease-out 100ms;
       -o-transition: top ease-out 100ms, border-bottom ease-out 100ms;
          transition: top ease-out 100ms, border-bottom ease-out 100ms;
  -webkit-transition-delay: 1s;
     -moz-transition-delay: 1s;
       -o-transition-delay: 1s;
          transition-delay: 1s;
  top: -35px;
}

/*#loginFeedback:empty {
  display: none;
}
*/


/* codemirror JS Bin custom styles */

#bin .editbox .CodeMirror {
  height: 100%;
  top: 0;
  bottom: 0;
  line-height: 1.2em;
  font-family: SourceCodeProRegular, Menlo, Monaco, consolas, monospace;
  font-size: 14px;
}
#bin .editbox .CodeMirror pre,
.mobile textarea {
  font-family: SourceCodeProRegular, Menlo, Monaco, consolas, monospace;
}

.mobile textarea {
  background: transparent;
}

.editbox .CodeMirror,
.editbox .CodeMirror .CodeMirror-gutters {
  background-image: linear-gradient(to bottom, rgba(200,200,200,0.2) 0%,rgba(200,200,200,0.2) 100%);

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(200,200,200,0.2)), color-stop(100%,rgba(200,200,200,0.2))); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top,  rgba(200,200,200,0.2) 0%,rgba(200,200,200,0.2) 100%); /* Chrome10+,Safari5.1+ */
  background-image:    -moz-linear-gradient(top,  rgba(200,200,200,0.2) 0%, rgba(200,200,200,0.2) 100%); /* FF3.6+ */
  background-image:      -o-linear-gradient(top,  rgba(200,200,200,0.2) 0%,rgba(200,200,200,0.2) 100%); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom,  rgba(200,200,200,0.2) 0%,rgba(200,200,200,0.2) 100%); /* W3C */

}
.editbox .CodeMirror.cm-s-jsbin,
.editbox .CodeMirror.cm-s-jsbin .CodeMirror-gutters,
.focus .editbox .CodeMirror,
.focus .editbox .CodeMirror .CodeMirror-gutters {
  background-image: none;
}

.CodeMirror-lines {
  /*margin-top: 8px;*/
  padding: .4em 0;
}

/* get some padding back in the editor after losing it above */
.CodeMirror pre {
  padding: 0 0.4em;
}

.CodeMirror-gutters {
  border-right: 0;
  background: none;
}

.CodeMirror-gutter-text {
  padding-top: 0;
}

.activeline {
  background: #F2F7FF !important;
}

.CodeMirror-linenumbers {
  padding-left: 0;
}

#jsbin .CodeMirror-Tern-tooltip,
#jsbin .CodeMirror-hints {
  border: 1px solid #aaa;
  border: 1px solid rgb(191, 191, 191);
  border: 1px solid hsl(0, 0%, 75%);
  border-radius: 0;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  font-family: SourceCodeProRegular, Menlo, Monaco, consolas, monospace;
  font-size: 100%;
}
#jsbin .CodeMirror-Tern-tooltip {
  padding-top: 5px;
}
#jsbin .CodeMirror-hint {
  font-size: 1.1em;
  line-height: 1.4em;
}
#jsbin .CodeMirror-Tern-completion:before {
  bottom: auto;
  top: 1px;
}

.CodeMirror-matchingtag {
  background: rgba(255, 150, 0, .3);
}

/* remove box-shadow from solarize theme */
.cm-s-solarized.CodeMirror {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* END CODEMIRROR CSS */

.ready #bin {
  opacity: 1;
/*  filter: alpha(opacity=1);*/
}

.mobile .html {
  border-left: 2px solid #ccc;
}

.mobile .editbox > div {
  background: #fff;
}

/* cancel effects when dragging - otherwise it looks lame and sluggish */
.dragging * {
  -webkit-transition: none !important;
     -moz-transition: none !important;
       -o-transition: none !important;
          transition: none !important;
}

.panel {
  background: #f9f9f9
}

.panel:first-child {
  border-left: 0;
}

.panel .label {
  display: block;
  position: relative;
  /*background: #FAFAFA;*/
  /*border-bottom: 1px solid #ededed;*/
}

.panel:before {
  position: absolute;
  display: block;
  background: #ccc;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  content: '';
}

.focus.panel:before {
  background: #A3D4FF;
}

.ie .focus .label {
  background-position: -10px 0;
}


.panel .label p {
  cursor: pointer;
}

.panel .label .close:before {
  font-size: 14px;
  color: #ccc;
  font-weight: normal;
  font-family: sans-serif;
  content: "\f057";
}

.panel .label .close {
  display: inline-block;
  text-decoration: none;
  padding: 10px;
}

.panel .label .close:hover:before {
  color: #000;
}

.label {
  padding: 0;
  margin: 0;
  padding-right: 0;
  position: absolute;
  z-index: 11;
}

.label p {
/*  display: inline;*/
  font-weight: bold;
/*  cursor: pointer;*/
}

.label label {
  margin-top: 10px;
}

/*.code .label p > span {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 250ms linear;
     -moz-transition: opacity 250ms linear;
}

.code .label p:hover span {
  opacity: 1;
  filter: alpha(opacity=1);
}
*/
.group.menu .button {
  float: none;
}

.icon { font-family: sans-serif; }
.button-dropdown-arrow:after,
.fake-dropdown:after { content: "▾"; padding-left: 5px; padding-right: 3px; }
.button-dropdown-arrow:empty:after,
.fake-dropdown:empty:after { padding-left: 0; }

/*.open .fake-dropdown {
  border: 1px solid #ccc;
  box-shadow: 1px 4px 7px rgba(0, 0, 0, 0.2);
  padding-left: 0px;
  position: absolute;
  z-index: 1;
}*/


/*.code .fake-dropdown:after {
  display: none;
}

.code.focus .fake-dropdown:after {
  display: inline;
}
*/
.editbox {
  /*background: white;*/
  /*padding-top: 5px;*/
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
}

.focus {
  background: white;
}

a.active {
  background-color: #EBF3FF;
  background-color: hsl(215, 100%, 96%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  border-top: 1px solid #AAA;
  border-left: 1px solid #AAA;
}

a.active:hover {
  /*-moz-box-shadow: #fff 0 0 5px;*/
  background-color: #F5F9FF;
  z-index: 1;
}

#console { bottom: 35px; left: 0; right: 0; width: 100%; margin-bottom: 35px; overflow: auto; /*border-bottom: 1px solid #5B5C5B;*/ }

#output { list-style: none; margin: 0; padding: 0; }
#output li { margin: 5px 0; padding: 5px; border-top: 1px solid #EEEFEE; white-space: pre-wrap; padding-bottom: 0; }
#output li:last-child { border-bottom: 0;}
#output > li > div { margin-left: 20px; line-height: 20px; }
#console span.gutter { float: left; display: block; width: 5px; }

#output li div { position: relative; }
#output .echo .permalink { position: absolute; right: 0; overflow: hidden; display: block; background: url(link.png) no-repeat center; height: 20px; width: 30px; text-indent: -200px; top: 0; opacity: 0.5; }

#output .echo .permalink:hover { opacity: 1; }

/* log types */
/*#output span.gutter:before { position: absolute; }*/
#output span.gutter:before { display: inline-block; font-family: monospace; font-size: 13px; line-height: 20px; }
#output .echo span.gutter:before { content: '❯ '; color: #8595AD; /*#3583FC;*/ font-weight: bold; margin-left: 5px; }
#output .info span.gutter:before { content: 'i '; color: #27A700; font-weight: bold; margin-left: 4px; }
#output .error span.gutter:before { content: '× '; color: #E81D20; margin-right: -10px; margin-left: 2px; font-size: 20px; font-weight: bold; }
#output .response span.gutter:before { line-height: 16px; content: '« '; color: #BDC3CD; margin-right: -10px; font-size: 20px; }

/* if response is directly next to echo, don't give it a line - only consoles get lines */
#output li.echo + li.response { border-width: 0; }

/* hard line on new echo */
#output li.response + li.echo { border-width: 2px; border-color: #DFDFDF; }
#output li.error + li.echo { border-width: 2px; border-color: #DFDFDF; }
#output li.log + li.echo { border-width: 2px; border-color: #DFDFDF; }
#output li.info + li.echo { border-width: 2px; border-color: #DFDFDF; }
/*#output li.info .response span { line-height: 30px; }*/

#output li.echo:first-child { border-width: 0;}
#output li:first-child { border-width: 0; padding-top: 0; }

#jsconsole-sandbox { display: none;}

/* input style - note: moz-shadow purposely omitted because it affects layout */
#console form {
  padding: 5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#console.plain form {
  padding: 0;
  margin-left: 23px;
  width: auto;
}

#exec, .fakeInput {
  resize: none;
  position: absolute;
  left: 0;
  right: 0;
  border: 0;
  /*padding: 5px; */
  outline: 0;
  color: #000;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  background: transparent;
}

#exec {
  margin: 0;
}

#console.plain form:before {
  font-family: monospace;
  font-size: 14px;
  line-height: 0;
  content: '❯ ';
  color: #3583FC;
  font-weight: bold;
  margin-left: 10px;
  position: absolute;
  top: 14px;
  left: -23px;
}

.fakeInput:before,
#exec:before {
  font-family: monospace;
  font-size: 14px;
  line-height: 14px;
  content: '❯ ';
  color: #3583FC;
  font-weight: bold;
  margin-left: 5px;
}


/* code complete visual tweaks */
#cursor { display: inline-block; height: 24px; min-width: 1px; outline: 0; top: 0; left: 0; z-index: 999;}

/* HACK */
#console form { position: relative; top: 0; width: 100%; z-index: 20; }
#console { padding-top: 35px; }
#exec, .fakeInput { position: relative; height: auto; }

#cursor { height: auto; white-space: pre-wrap; }

#exec, .fakeInput { cursor: text; }
#exec .suggest { color: #999; }



/* font size control */
/*#console { top: 35px; bottom: 35px; }*/
#output li, #exec, .fakeInput { min-height: 20px; font-size: 14px; font-family: SourceCodeProRegular, "Menlo", consolas, monospace; }

/** Pretty printing styles. Used with prettify.js. */

#output .str { color: #080; }
#output .kwd { color: #008; }
#output .com { color: #800; }
#output .typ { color: #606; }
#output .lit { color: #066; }
#output .pun { color: #660; }
#output .pln { color: #000; }
#output .tag { color: #008; }
#output .atn { color: #606; }
#output .atv { color: #080; }
#output .dec { color: #606; }
#output .error span { color: #E81D20;}

.dropdown {
  display: none;
  height: auto;
  /*border-bottom-right-radius: 5px;*/
  position: absolute;
  /*padding: 3px 20px 10px 3px;*/
  padding: 0;
}
.ie7 .dropdown {
  top: 100%;
  left: 0;
  z-index: 10;
}
.ie7 .help .dropdown {
  left: auto;
  right: 0;
}
.ie7 #control,
.ie7 .control,
.ie7 .help {
  position: static;
}
.ie7 .help {
  float: right;
}
.ie7 #help {
  width: 260px;
}
.ie7 #embedfield {
  border: 2px solid #b7dffd;
  width: 95%;
  margin: 0;
  position: static;
}

.dropdown .meta {
  color: #999;
}

.dropdownmenu,
.dropdowncontent {
  /* margin: 3px 5px; */
  background: white;
  box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.1);
  border: 1px solid rgb(204, 204, 204);
  height: auto;
  /* border-radius: 5px; */
  text-align: left;
}

#help {
  max-width: 266px;
}

#registerLogin .dropdowncontent {
  padding: 20px;
}

.label.open .dropdownmenu {
  margin-left: 2px;
}

.label.open {
  padding: 9px 100px 0px 0px;
}

.label.open .name {
  position: relative;
  padding: 4px;
  z-index: 1;
  padding-left: 2px;
  padding-bottom: 3px;
}

.label.open .name > strong {
  border: 1px solid #ccc;
  padding: 10px;
  background: #fff;
  padding-top: 5px;
  /* box-shadow: 1px 4px 7px rgba(0,0,0,0.2); */
  padding-bottom: 6px;
  border-bottom: 0;
}

.open .dropdown {
  display: block;
}

.dropdown.login {
  right: 0;
}
.open .dropdown.login .pointer {
border: 9px solid rgba(0,0,0,0);
border-bottom: 7px solid #fff;
width: 0px;
height: 0px;
position: absolute;
top: -15px;
left: 50%;
}

.dropdownmenu > a {
  display: block;
  float: none;
  border-right: 0;
  /*padding: 5px 20px 5px 25px;*/
  padding: 5px 20px 5px 10px;
}

.dropdownmenu form {
  margin: 0;
  padding: 0;
}

.dropdown > .button:hover {
  background: #aaa;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.menu > a.button {
  display: inline-block;
  position: relative;
  padding: 6px 10px;
}

.help .menu > a.avatar {
  padding: 7px;
  margin-top: -5px;
  /* line-height: 32px; */
  height: 26px;
  /* line-height: 0; */
}

#accountBtn {
  line-height: 34px;
}

#panels {
  text-align: center;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  padding-top: 2px;
  padding-bottom: 1px;
}

#panels a {
  text-decoration: none;
  display: inline-block;
  float: none;
}

.open .button-dropdown,
.open .button-dropdown:hover,
.open .button-open,
.open .button-open:hover {
  background: #fff;
  z-index: 1;
}

.code .open .button-dropdown {
  background: inherit;
}

#panels .button {
  height: 17px;
  line-height: 19px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid hsl(0, 0%, 80%);
}

#panels .button.active {
  border-left: 0;
}

#panels .hasContent:after {
  content: " ";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 5px;
  height: 5px;
  background-color: rgba(255, 255, 255, .8);
  margin-left: -2px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow:
    inset 0 1px 3px rgba(75, 255, 255, .4),
    0 0 4px rgba(75, 255, 255, .5),
    0 -1px 7px rgb(75, 255, 255);
  -moz-box-shadow:
    inset 0 1px 3px rgba(75, 255, 255, .4),
    0 0 4px rgba(75, 255, 255, .5),
    0 -1px 7px rgb(75, 255, 255);
  box-shadow:
    inset 0 1px 3px rgba(75, 255, 255, .4),
    0 0 4px rgba(75, 255, 255, .5),
    0 -1px 7px rgb(75, 255, 255);
}

#panels .active:after {
  display: none;
}

#panels .button:first-child {
  border-left: 1px solid #ccc;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#panels .button:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.label {
  padding: 10px 10px 0 10px;
  line-height: 20px;
}

.label label {
  margin: 0;
}

.label .options {
  float: right;
  display: block;
}

.label .options > * {
  margin-left: 10px;
}

.label .options label {
  display: inline-block;
  cursor: pointer;
}

.label .options label input {
  margin-left: 5px;
}

/* history listings */
#history .thumb {
  border: 1px solid #ccc;
  overflow: hidden;
  height: 145px;
  width: 193px;
  margin: 10px 0;
}

#history iframe-dead {
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
  /* IE8+ - must be on one line, unfortunately */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8, M12=0, M21=0, M22=0.8, SizingMethod='auto expand')";

  /* IE6 and 7 */
  filter: progid:DXImageTransform.Microsoft.Matrix(
           M11=0.8,
           M12=0,
           M21=0,
           M22=0.8,
           SizingMethod='auto expand');

  -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
          transform-origin: 0 0;
}

#history iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  margin: 0 auto;
}

.panelsVisible #history {
  display: none;
}

#history {
  z-index: 0;
  font-family: SourceCodeProRegular, Menlo, Monaco, consolas, monospace;
  text-shadow: none;
  font-size: 14px;
  padding: 0 0 10px 0;
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  right: 30%;
  bottom: 0;
  overflow: auto;
  background: #fff;
  display: none;
}

.ready #history {
  display: block;
  z-index: 10;
}

.panelsVisible #history {
  display: none !important;
}

#history .preview {
  -webkit-transition: right ease-out 200ms;
     -moz-transition: right ease-out 200ms;
       -o-transition: right ease-out 200ms;

  border-left: 1px solid #ccc;
  position: fixed;
  top: 31px;
  width: 30%;
  right: 0;
  height: 100%;
  padding-top: 10px;
  background: #fff;
}

#history .preview a {
  text-decoration: underline;
  color: blue;
}

#history .header {
  overflow: hidden;
}
#history .header h2 {
  float: left;
}

#history .header a {
  color: rgb(161, 216, 253);
  font-weight: inherit;
}

#history .header a:active,
#history .header a:hover,
#history .header a:focus {
  text-decoration: underline;
}

#history h2 {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-size: 13px;
  padding: 10px 20px;
}

#history .header .menu {
  float: right;
  padding: 10px 20px;
  font-size: 13px;
  font-family: "Helvetica Neue", Helvetica, Arial;
}

#history #bins h2 {
  margin-bottom: 10px;
}

#history table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  position: relative;
}

#history tr {
  cursor: pointer;
  background: #fff;
}

#history td {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  width: 15%;
}

#history a {
  font-weight: normal;
  text-decoration: none;
  color: #000;
  text-shadow: none;
}

#history .snapshot a {
  color: #ccc;
}

#history .url {
  text-align: right;
  width: 100px;
  padding-left: 20px;
  padding-right: 20px;
}

#history .url .snapshot {
  color: rgb(161, 216, 253);
}

#history .url a span {
  color: #000;
}

#history .created {
  width: 25%;
}

#history .created a {
  color: #ccc;
}

#history .title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 50%;
}

#history tr:hover *,
#history tr.hover *,
#history tr:hover span,
#history tr.hover span,
#history tr:hover .url .snapshot,
#history tr.hover .url .snapshot {
  background: #61C0FF;
  color: #fff;
  cursor: pointer;
}

#history tr.selected *,
#history tr.selected .url .snapshot,
#history tr.selected span {
  background: #0097fe;
  color: #fff;
  cursor: pointer;
}

#history #viewing {
  font-size: 10px;
  margin: 0 10px 10px 20px;
  text-decoration: underline;
  color: blue;
}

#history.archive_mode tr.spacer,
#history tr.spacer {
  height: 10px;
  display: table-row;
}

#history tr.spacer:hover * {
  background: #fff;
  cursor: default;
}

/* Archive */

/* By default, don't show archived rows */
#history tr.archived {
  display: none;
}

/* In archive mode, don't show rows by default */
#history.archive_mode tr {
  display: none;
}

/* Show archived rows when in archive mode */
#history.archive_mode tr.archived {
  display: table-row;
}

/* By default, hide the unarchive button */
#history .unarchive {
  display: none;
}

/* Show the unarchive button and hide the archive button in archive_mode */
#history.archive_mode .unarchive {
  display: inline;
}

#history.archive_mode .archive {
  display: none;
}

/* The archive buttons */

#history .action {
  text-align: right;
  padding-right: 10px;
  width: 100px;
}

#history .action span {
  visibility: hidden;
  font-size: 12px;
}
#history .archived .action span {
  /* visibility: visible; */
}

#history .action a {
  padding-left: 10px;
}
#history .action a:first-child {
  padding-left: 0;
}
#history .action a,
#history .action span {
  color: #ccc !important;
}

#history .action:hover,
#history .action:hover span,
#history tr:hover .action a,
#history tr:hover .action span {
  color: black !important;
}

#history .action:hover span,
#history tr:hover .action span  {
  visibility: visible;
}

/* public history */
.public-listing .menu,
.public-listing .action {
  display: none;
}

.public-listing body {
  overflow: auto;
}

.public-listing #history {
  position: relative;
  top: 0;
}

.public-listing #history .preview {
  top: 0;
}

/*@media (max-height: 770px) {*/
.hideheader.ready #control {
  border-bottom: 6px solid #AAA;
  -webkit-transition: top ease-out 200ms, border-bottom ease-out 200ms;
     -moz-transition: top ease-out 200ms, border-bottom ease-out 200ms;
       -o-transition: top ease-out 200ms, border-bottom ease-out 200ms;
          transition: top ease-out 200ms, border-bottom ease-out 200ms;
  -webkit-transition-delay: 1s;
     -moz-transition-delay: 1s;
       -o-transition-delay: 1s;
          transition-delay: 1s;
  top: -35px;
}

.hideheader.ready #bin,
.hideheader #history,
.hideheader #history .preview {
  top: 6px;
}

.toppanel.hideheader.ready #bin,
.toppanel.hideheader #history,
.toppanel.hideheader #history .preview {
  top: 200px;
}

.hideheader #control:hover {
  top: 0;
  -webkit-transition: top ease-out 10ms;
     -moz-transition: top ease-out 10ms;
       -o-transition: top ease-out 10ms;
          transition: top ease-out 10ms;
  -webkit-transition-delay: 100ms;
     -moz-transition-delay: 100ms;
       -o-transition-delay: 100ms;
          transition-delay: 100ms;
}

#panelswaiting {
  display: none;
}

#actionmenu {
  top: 100%;
  /* left: -10px; */
}

#share {
  left: -10px;
}

#share input[type=text],
#share textarea {
  box-sizing: border-box;
  width: 100%;
}

#share .lockoption {
  margin: 10px -10px -10px;
  cursor: pointer;
  padding: 10px;
  background: #F4FAFF;
}

#share .lockoption:hover {
  background: #e9f3fe;
}

#sharemenu.hidden {
  top: -40px;
}

#sharemenu {
  display: inline-block !important;
  -webkit-transition: top ease-out 100ms;
     -moz-transition: top ease-out 100ms;
       -o-transition: top ease-out 100ms;
          transition: top ease-out 100ms;
  top: 0;
}

#sharemenu strong,
#sharemenu .dropdowncontent .heading {
  font-size: 15px;
  padding: 2px 0;
  display: inline-block;
  color: #747474;
  text-decoration: none;
}

#sharemenu .share-split form label {
  font-size: 13px;
  font-weight: normal;
}

#sharemenu .share-split .heading,
#sharemenu .share-split a {
  font-weight: normal;
  color: #777;
}

#sharemenu strong a {
  text-decoration: none;
}

#sharemenu hr {
  margin: 10px -10px;
}


.dropdownmenu a,
.dropdownmenu .button {
  cursor: pointer;
  padding: 6px 100px 6px 10px;
  /* font-weight: bold; */
}
.dropdownmenu .small {
  color: rgba(0,0,0,0.7);
}

hr {
  border-style: solid;
  border-color: #D5D5D5;
  border-width: 1px;
  border-bottom: none;
  margin: 0;
}

form + hr {
  margin: 12px 0;
}

#save {
  width: 50px;
  position: relative;
  z-index: 1;
}

#control .file {
  padding-left: 10px;
}

.code .name {
  display: block;

  /* overflow: hidden; */
  position: relative;
  width: 210px;
  /* allow a black theme but for the text to still be readable */
  /*text-shadow: -2px 0 10px white, 2px 0 10px white, 0 2px 10px white, 0 -2px 10px white;*/
}

.code .name a {
  text-decoration: none;
}

.label .name span {
  /*margin-left: -41px;*/
  padding-left: 4px;
  color: #999;
  opacity: 0;
}

/* these versions of IE don't support the history API anyway */
.ie .name span {
  display: none;
}

#popout {
  margin-left: 5px;
}

.highlight {
  border: 1px solid rgb(255,235,0);
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
  border-radius: 3px;
  padding: 2px 5px;
  margin: -2px 1px;
  text-shadow: 0 1px 0 rgba(255,255,0, 0.5);
  cursor: default;

  background: #ff0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffff00), color-stop(50%,#ffd800));
  background: -webkit-linear-gradient(top, #ffff00 0, #ffd800 50%);
  background:    -moz-linear-gradient(top, #ffff00 0, #ffd800 50%);
  background:      -o-linear-gradient(top, #ffff00 0, #ffd800 50%);
  background:         linear-gradient(top, #ffff00 0, #ffd800 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#ffd800',GradientType=0 );
}

/*pre .highlight:first-of-type {
  border-left: 1px solid rgb(255,235,0);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  padding-left: 5px;
}

pre .highlight:last-of-type {
  border-right: 1px solid rgb(255,235,0);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  padding-right: 5px;
}*/

.dd-right {
  right: -10px;
}


#jsbinurl.hidden {
  position: absolute;
  opacity: 0;
  margin-right: -10px;
  overflow: hidden;
  width: 0;
  /*padding: 0;*/
}

#jsbinurl img {
  border: 0;
}

.dropdown {
  margin-top: -1px;
}

/*
.dropdown > div:after, .dropdown > div:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  z-index: 1;
  left: 17%;
}

.dropdown > div:after {
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
  top: -16px;
}

.dd-right.dropdown > div:after {
  left: 83%;
}

.dropdown > div:before {
  border-bottom-color: #ccc;
  border-width: 11px;
  margin-left: -11px;
  top: -18px;
}

.dd-right.dropdown > div:before {
  left: 83%;
}
*/
.avatar {
  /*margin-right: 7px;*/
  vertical-align: top;
  /*display: inline-block;*/
  margin-top: -2px;
  /* position: absolute; */
  right: 0;
  /*top: 2px;*/
  padding: 8px;
}

.avatar img {
  border-radius: 1px;
  border: 1px solid #fff;
  -webkit-box-shadow: 0 0 1px #999;
     -moz-box-shadow: 0 0 1px #999;
       -o-box-shadow: 0 0 1px #999;
          box-shadow: 0 0 1px #999;
  /*position: absolute;*/
  /*right: 0;*/
  /* top: 0px; */

  box-shadow: 0 0 1px #999;
  background: #fff;
}

.open .avatar {
  background: #fff;
  padding: 2px;
}

.open .avatar img {
  border: 1px solid #fff;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.brand {
  display: inline-block;
  /*font-weight: bold;*/
  padding: 10px;
  margin-left: 5px;
}

.brand h1 {
  font-size: 13px;
  display: inline;
  margin: 0;
  padding: 0;
}

.brand img {
  border: 0;
  vertical-align: top;
  margin-top: 4px  ;
}

.button-dropdown-arrow {
  padding: 6px 6px !important;
}

#share input[type=text] {
  font-size: 14px;
  line-height: 20px;
  cursor: text;
  width: 100%;
  box-sizing: border-box;
}

.ie span.icon {
  zoom: 1;
}

#start-saving {
  display: none;
}

#start-saving a {
  border: 1px solid #CCC;
  padding: 1px 10px;
  border-radius: 5px;
  background: #ff0;
  background: linear-gradient(top,  #ffff00 0,#ffd800 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#ffd800',GradientType=0 );
}

#login .forgot {
  display: none;
}

#login.forgot .forgot {
  display: block;
}

#login.forgot .login {
  display: none;
}

.embed #live .label .name {
  display: none;
}

.embed #live .options {
  overflow: hidden;
  background: #fff;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0.3;
  position: absolute;
  bottom: 10px;
  right: 10px;
  -webkit-transition: opacity ease-in 50ms;
     -moz-transition: opacity ease-in 50ms;
       -o-transition: opacity ease-in 50ms;
          transition: opacity ease-in 50ms;
}

.embed #live:hover .options {
  opacity: 1;
}

.embed #live .label {
  position: static;
}

.embed .blog {
  display: none;
}

.embed .options a {
  display: none;
}

.embed #live iframe {
  padding-top: 0;
}


#menuinfo {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  z-index: 9;
  display: none;
}

.menuinfo #menuinfo {
  display: block;
}

#menuinfo p {
  font-size: 18px;
  line-height: 30px;
  margin: 0 auto;
  margin-top: 2px;
  width: 75%;
  background: rgba(212, 250, 11, 0);
  border-radius: 10px;
  border: rgba(245, 245, 200, 1);
}

/* when the a menu is selected, only show the menu that's open */
.control .menu,
#panels {
/*  -moz-transition: opacity 50ms;
  -webkit-transition: opacity 50ms;
  -ms-transition: opacity 50ms;
  -o-transition: opacity 50ms;
  transition: opacity 50ms;
  opacity: 1;
*/}

.menuinfo .control .menu,
.menuinfo #panels {
  /*opacity: 0;*/
  visibility: hidden !important;
}

.menuinfo .control .menu.open {
  /*opacity: 1 !important;*/
  visibility: visible !important;
  background: white;
  z-index: 10;
}

.menuinfo .control {
  z-index: 11;
}

.keyshortcut {
  position: absolute;
  right: 10px;
  /*font-weight: bold;*/
}

.nokeyboardshortcuts .keyshortcut {
  display: none;
}

.dd-right .keyshortcut {
  right: 20px;
}

#share {
  width: 325px;
}

#share.share-split {
  width: 433.6px;
  box-sizing: border-box;
}

.inline {
  margin: 0;
  padding: 0;
  font-size: 13px;
  overflow: hidden;
  box-sizing: border-box;
}
.inline li {
  float: left;
  list-style: none;
}

#share .inline label {
  font-weight: normal;
  margin: 0;
  margin-right: 8px;
  color: #333;
  cursor: pointer;
}

#share .inline li:last-of-type {
  margin-right: 0;
}

#share .inline input {
  margin-left: 1px;
  cursor: pointer !important;
}

#share .inline input[type=radio] {

}

/** CodeMirror Themes **/
/* Default theme is higher in the style sheet with codemirror's own code */

/* jsbin - based on web inspector */
.cm-s-jsbin span.cm-keyword {color: #AA0D91;}
.cm-s-jsbin span.cm-atom {color: #219;}
.cm-s-jsbin span.cm-number {color: #164;}
.cm-s-jsbin span.cm-def {color: #00f;}
.cm-s-jsbin span.cm-variable {color: black;}
.cm-s-jsbin span.cm-variable-2 {color: #05a;}
.cm-s-jsbin span.cm-variable-3 {color: #0a5;}
.cm-s-jsbin span.cm-property {color: black;}
.cm-s-jsbin span.cm-operator {color: black;}
.cm-s-jsbin span.cm-comment {color: #236E25;}
.cm-s-jsbin span.cm-string {color: #C41A16;}
.cm-s-jsbin span.cm-meta {color: #555;}
.cm-s-jsbin span.cm-error {color: #f00;}
.cm-s-jsbin span.cm-qualifier {color: #555;}
.cm-s-jsbin span.cm-builtin {color: #30a;}
.cm-s-jsbin span.cm-bracket {color: #cc7;}
.cm-s-jsbin span.cm-tag {color: #881280;}
.cm-s-jsbin span.cm-attribute {color: #994500;}

html * {
  color-profile: sRGB;
  rendering-intent: auto;
}



.CodeMirror {
  background: transparent;
}

.CodeMirror-activeline-background:before,
.line-highlight:before {
  content: "";
  position: absolute;
  background: inherit;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 200%;
  right: 100%;
}

.code-fold .CodeMirror pre {
  padding: 0 0.2em;
}

.CodeMirror-focused .cm-matchhighlight {
  outline: 1px solid #666;
}

.cm-trailingspace {
  background-image: url();
  background-position: bottom left;
  background-repeat: repeat-x;
}

.cm-s-solarized.cm-s-light.cm-keymap-fat-cursor div.CodeMirror-cursor {
   background:#002b36;
}
.cm-s-solarized.cm-s-dark.cm-keymap-fat-cursor div.CodeMirror-cursor {
   background:#fdf6e3;
}
.cm-s-solarized.cm-s-dark,
.cm-s-solarized.cm-s-light {
  text-shadow: none;
}
.cm-s-solarized.cm-s-light .CodeMirror-selected {
  background:none repeat scroll 0% 0% #002b36;
}
.cm-s-solarized.cm-s-dark .CodeMirror-selected {
  background:none repeat scroll 0% 0% #fdf6e3;
}


@media only screen and (max-width: 680px) {
  .help .menu {
    display: none;
  }

  #panels {
    right: 0;
    width: inherit;
    margin-right: 5px;
  }
}

@media only screen and (max-width: 500px) {
  .help .menu {
    display: none;
  }

  #panels {
    display: none;
  }

  .embed #panels {
    display: block;
  }
}

/* hover card styles */
.card div {
  display: inline-block;
  vertical-align: middle;
}

.card {
  z-index: 10;
  position: absolute;
  bottom: 12px;
  right: 12px;
  float: left;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
  background: #fafafa;
  background: -moz-linear-gradient(top,  #FFF 0%, #FBFBFB 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#FBFBFB)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #FFF 0%,#FBFBFB 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #FFF 0%,#FBFBFB 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #FFF 0%,#FBFBFB 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #FFF 0%,#FBFBFB 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#FBFBFB',GradientType=0 ); /* IE6-9 */
  display: inline-block;
  box-sizing: border-box;
  /*margin: 10px;*/
  border: 1px solid #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  /* min-width: 500px; */
}

.card.owner header img {
  display: none;
}

.card.author .meta .name,
.card .meta .author,
.card.author header img {
  display: none;

}

.card.author .meta .author {
  display: inline-block;
}


.card span {
  opacity: 1;
}

.card b {
  font-weight: inherit;
}

.card header {
  background: #fafafa;
  background: -moz-linear-gradient(top,  #f1f1f1 0%, #fff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#fff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f1f1f1 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f1f1f1 0%,#fff 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f1f1f1 0%,#fff 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #f1f1f1 0%,#fff 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#fff',GradientType=0 ); /* IE6-9 */

  cursor: pointer;
  display: block;
  box-sizing: border-box;
  height: 48px;
  white-space: nowrap;
  overflow: visible;
  /*overflow-x: auto;*/
  width: 100%;
}

.card .body {
  display: none;
  padding: 10px 20px;
  border-bottom: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

.card .settings label {
  font-weight: normal;
  margin-left: 0;
  color: #000;
}

.card .settings * {
  font-size: 14px;
}

.card .settings details {
  width: 360px;
}

.card .settings summary {
  cursor: pointer;
  font-weight: bold;
  margin: 10px 0;
  width: auto;
  display: inline-block;
}

.card .settings {
  display: none;
  float: left;
  margin-right: 20px;
  width: 220px;
}

.card.author .settings {
  display: block;
}

.card .settings h2 {
  margin: 0;
}

.card .settings fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.card .settings #headers input {
  width: 152px;
}

.card.open .body {
  display: block;
  overflow: hidden;
}

.card .body select {
  margin: 0;
  width: 100%;
  display: block;
  font-size: 16px;
}

.card .body a {
  color: #212121;
  font-size: 14px;
}

.card .body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  float: right;
}

.card .body li {
  margin: 10px 0
}

.card .body li:first-child {
  margin-top: 0;
}

.card .body li:last-child {
  margin-bottom: 0;
}

.card.private {
  border: 1px solid #fafafa;
}

.card.private header {
  background: #d1e6fa;
}

.card .meta {
  white-space: nowrap;
  padding-right: 10px;
  margin: 5px 0;
  float: right;
}

.card.author .meta,
.card.anonymous .meta {
  padding-left: 10px;
}

.card .name {
  margin-bottom: 2px;
}

.card.pro .pro {
  display: inline-block;
}

.card .pro {
  display: none;
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: bold;
  color: rgba(0,0,0,.4);
  vertical-align: super;
}

.card img {
  margin: 5px;
  padding: 5px;
  float: left;
  width: 30px;
}

.card.anonymous header img {
  display: none;
}

.card .visibility {
  margin: 14px 20px;
  border: 1px solid #337ae0;
  color: #337ae0;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 2px 15px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  float: right;
  display: none;
}

.card.private .visibility {
  display: inline-block;
}

.card .viewers {
  display: inline-block;
  height: 100%;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  box-sizing: border-box;
  line-height: 16px;
}

.card .viewers > b {
  overflow: hidden;
  height: 16px;
}

.card .viewers b {
  display: inline-block;
  margin-top: -16px;
  -webkit-transition: margin-top ease-out 200ms;
}

.card .viewers b.up b {
  margin-top: -32px;
}

.card .viewers b.down b {
  margin-top: 0;
}


.card.private .viewers {
  border-right: 1px solid #ccc;
}

.card.meta .viewers {
  border-left: 1px solid #ccc;
}

.card .when,
.card .viewers span {
  color: rgba(0,0,0,.4);
  font-weight: 800;
  font-size: 12px;
  line-height:16px;
  display: block;
}

.card.viewers .viewers {
  display: inline-block;
}

.card .streaming {
  display: none;
}

.card .viewers {
  display: none;
}

.card canvas {
  display: none;
  margin-right: 2px;
}

.card.streaming canvas {
  display: inline;
}

.card li.owner {
  display: none;
}

.card.author li.owner {
  display: block;
}

.menu > a.focusbtn {
  background-color: #FFEB3B;
  padding: 2px 7px;
  border-radius: 0px;
  margin: 4px 3px;
  color: #111;
  /*font-weight: 500;*/
}

.menu.open a.focusbtn,
.menu.open a.focusbtn:hover {
  background-color: #fff;
  padding: 6px 10px;
  border-radius: 0;
  margin: 0;
}

.menu > a.focusbtn:hover {
  border-color: transparent;
}

.menu.open a.focusbtn:hover {
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
}

.snapshot1 .url a span:before,
tbody:hover tr:hover.snapshot .url a span:before {
  content: 'snapshot# ';
  font-size: 14px;
}

tbody:hover .snapshot1 .url a span:before {
  content: '';
}

.snapshot td {
  /* opacity: 0.3; */
  /* color: #ccc !important; */
}

.snapshot td.url {
/*   opacity: 0.3; */
  color: rgb(0, 151, 254);
}

.snapshot:hover td,
.snapshot.selected td {
  opacity: 1;
}

/** share menu **/

.share-split .dropdowncontent {
  min-width: 350px;
  overflow: hidden;
}

.share-split .controls,
.share-split .result {
  width: 33%;
}

.share-split .controls {
  float: left;
  overflow: hidden;
}

.share-split .result {
  margin-left: 33%;
}

.share-split ul {
  list-style: none;
  padding-left: 0;
  margin-top: 10px
}

.share-split #sharepanels {
  margin-right: 20px;
}

.share-split #sharepanels ul {
  padding-left: 20px;
}

.share-split ul {
  margin-top: 0;
}

.share-split form label {
  color: #111;
}

#sharemenu .share-split textarea {
  min-height: 50px;
  max-width: 100%;
  width: 100%;
}

.share-split .result {
  width: 67%;
  position: relative;
}

.share-split .result input,
.share-split .result textarea {
  box-sizing: border-box;
}

.share-split form div:first-child,
.share-split form > div {
  padding-top: 0;
}

.share-split .heading {
  font-weight: bold;
}

.share-split label small {
  display: block;
  /* margin-top: 4px; */
  margin-left: 27px;
  line-height: 1.2;
}

#share.share-split a.link {
  text-decoration: underline;
}

.share-split a.link:after {
/*   content: " ¶"; */
  color: #ccc;
}

.share-split a.link:hover:after {
  color: #000;
}.btn-login {
  color: #AAA;
}

.btn-login:hover,
.btn-login:hover span {
  color: #111;
}


#profile {
/*   min-width: 400px; */
}

#profile .dropdowncontent {
  overflow: hidden;
  padding-right: 30px;
}

div.large-gravatar {
  display: inline-block;
  width: 120px;
  float: left;
  margin-right: 10px;
  position: relative;
}

div.small-gravatar {
  display: inline-block;
  with: 30px;
  position: relative;
}

div.small-gravatar object,
div.large-gravatar object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#profile .large-gravatar {
  float: left;
  margin-right: 10px;
  width: 120px;
  z-index: 10;
  position: relative;
}

#share-preview .editor {
  display: none;
  width: 100%;
  table-layout: fixed;
  height: 100px;
  border: 1px solid #eee;
  border-top: 0;
  background: #eee;
  /* border-collapse: separate; */
  padding-top: 0;
  border-bottom: 2px solid #eee;
}

#share-preview .header {
  display: none;
  width: 100%;
  position: relative;
  height: 13px;
  background: url(/images/share-header.svg) no-repeat;
}

#share-preview.editor .editor {
  display: table;
}

#share-preview.editor .header,
#share-preview.output .output {
  display: block;
}

#share-preview .output {
  display: none;
}

#share-preview.output .output {
  background: url(/images/jsbin-output-small.gif) no-repeat;
  background: url(/images/output-preview.svg) no-repeat;
  height: 113px;
  /* width: 200px; */
}

#share-preview.output .output:after {
  font-family: monospace;
  font-size: 16px;
  display: block;
  text-transform: uppercase;
  position: relative;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
  letter-spacing: 0.05rem;
  content: ' ';
  padding: 10px;
}


#share-preview .editor div:after {
  font-family: SourceCodeProRegular, Monaco, consolas, monospace;
  font-size: 16px;
  -webkit-transform: rotate(90deg) translateX(-25px);
  -webkit-transform-origin: 0% 130%;
  -moz-transform: rotate(90deg) translateX(-25px);
  -moz-transform-origin: 0% 130%;
  transform: rotate(90deg) translateX(-25px);
  transform-origin: 0% 130%;
  display: block;
  position: relative;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0px rgba(0, 0, 0, 0.36);
  letter-spacing: 0.05rem;
  content: attr(class);
  color: #111;
  max-width: 38px;
  padding-left: 5px;
}

#share-preview .editor div.html:after {
  /* text-transform: uppercase; */
  content: '<html>';
}

#share-preview .editor div.css:after {
  content: '.css{}';
  padding-left: 1px;
}

#share-preview .editor div.js:after {
  content: 'js()';
}

#share-preview .editor div.console:after {
  content: '> log';

}


#share-preview .editor div {
  position: relative;
  display: table-cell;
  width: 100%;
  border-collapse: separate;
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #eee;
  text-align: center;
}

#share-preview .editor > div {
  background: #fdfdfd !important;

}

#share-preview .editor .js:after {
  color: #FF4136;
  /* padding-left: 2px; */
}

#share-preview .editor .html:after {
  color: #37AE45;
}

#share-preview .editor .css:after {
  color: #0074D9;
}

#share-preview .editor .console:after {
  color: #B10DC9;
}

#share-preview .editor .output:after {
  color: #F012BE;
}

#share .direct-links:empty {
  display: none;
}

#share .direct-links:before {
  color: rgb(119, 119, 119);
  font-size: 14px;
  content: 'Sources: ';
}

#share .direct-links a {
  margin-right: 5px;
}

.CodeMirror-highlight-line,
.CodeMirror-highlight-line .CodeMirror-linenumber,
.CodeMirror-highlight-line-background {
  background: rgba(255, 255, 204, 0.6);
}

/* toppanel status */
#toppanel {
  height: 200px;
  background: rgb(236, 242, 250);
  position: relative;
  z-index: 100000;
  border-bottom: rgb(191, 191, 191) solid 1px;
  margin-top: -200px;
}
.toppanel #toppanel {
  margin-top: 0;
  line-height:16px;
}

.toppanel #bin,
.toppanel #history,
.toppanel #history .preview {
  top: 236px;
}

#toppanel ~ #control .brand {
  margin-left: 34px;
}
#toppanel ~ #control .brand img {
  display: none;
}

body.toppanel {
  background-position: center calc((100% - 250px) / 2 + 256px);
}
body.ready.toppanel {
  background: white;
}

.toppanel #tip.notification,
.toppanel #tip.error {
  top: 234px;
}

/* toppanel */
.toppanel-wrapper {
  display: block !important;
  color: #232323;
  font-size: 0;
  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.toppanel-column {
  font-size: 14px;
  display: inline-block;
  padding: 0 4px;
  vertical-align: top;
  max-width: 220px;
  width: 16.66%;
  height: 179px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  margin-right: 20px;
}
/* Pro column
   this could change in the future depending on the content */
.toppanel-column:nth-child(3) {
  /* max-width: 180px; */
  /* margin-right: 10px; */
}

@media (max-width: 1437px) { /* 5 */
  .toppanel-column {
    width: calc((100% - 240px) / 4);
    max-width: 100%;

    margin-right: 8px;
}
  .toppanel-column:nth-child(n+6) {
    display: none;
  }
}
@media (max-width: 1023px) { /* 4 */
  .toppanel-column {
    width: calc((100% - 250px) / 3);

    margin-right: 10px;
}
  .toppanel-column:nth-child(n+5) {
    display: none;
  }
}
@media (max-width: 816px) { /* 3 */
  .toppanel-column {
    width: calc((100% - 240px) / 3);
  }
  .toppanel-column:nth-child(n+4) {
    /* display: none; */
  }
}
@media (max-width: 700px) { /* 2 */
  .toppanel-column {
    width: calc((100% - 240px) / 2);
  }
  .toppanel-column:nth-child(n+4) {
    display: none;
  }
}
@media (max-width: 616px) { /* 2 */
  .toppanel-column {
    width: calc(100% - 217px);
  }
  .toppanel-column:nth-child(n+3) {
    display: none;
  }
}
@media (max-width: 416px) { /* 1 */
  .toppanel-column:nth-child(n+2) {
    display: none;
  }
}
.toppanel-column-first {
  padding-right: 10px;
  overflow: visible;
  width: 197px;
}
.toppanel-section {
  margin-bottom: 12px;
}

.toppanel-love {
  border: 1px solid hsl(214, 58%, 75%);
  padding: 5px 10px;
  border-radius: 3px;
  background: hsl(214, 52%, 98%);
  margin-top: 24px;
}

.toppanel-no-pro {
  background: #4CAF50;
  border-color: #4CAF50;
  padding: 0;
}

.toppanel-wrapper .toppanel-no-pro a {
  padding: 10px 5px;
  display: block;
  color: #fff;
}

.toppanel-actions {
  position: relative;
  top: -12px;
  z-index: 0;
}
.toppanel-actions-alone {
  top: 0;
}
.toppanel-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.toppanel-title a:after {
  content: " »";
  font-size: 1.1em;
}
.toppanel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toppanel-wrapper a {
  color: rgb(98, 147, 211);
  display: block;
  padding: 6px 10px 6px 1px;
  text-decoration: none;
  text-shadow: none;
}
.toppanel-wrapper p a {
  display: inline;
  padding: inherit;
}
.toppanel-wrapper a:hover {
  background: #CCC;
  background: rgba(0, 0, 0, 0.05);
}
a.toppanel-twitter-link {
  display: inline;
}
.toppanel-bin-name {
  width: 5em;
  display: inline-block;
}
.toppanel-bin-date {
  color: #888;
}
.toppanel-quote {
  line-height: 1.4;
}
.toppanel-quote-author {
  color: #888;
  display: block;
  font-weight: 500;
}
div:first-child > .toppanel-button {
  position: static;
}
.toppanel-button {
  border: 1px solid #6293D3;
  line-height: 25px;
  margin: 0 auto;
  text-align: center;
  width: 150px;
  position: relative;
  top: -1px;
}
.toppanel-button-dropdown {
  position: relative;
}
.toppanel-button-dropdown:after {
  border-left: 1px solid #6293D3;
  content: "▾";
  font-size: 18px;
  line-height: 40px;
  position: absolute;
  width: 28px;
  right: 0;
  top: 0;
  bottom: 0;
}
.toppanel-button-disabled {
  opacity: 0.5;
}
a.toppanel-hide {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 0 5px 7px;
  font-size: 35px;
  line-height: 0.7;
  color: #6293D3;
  color: rgba(98, 147, 211, 0.5);
  font-weight: 200;
  text-indent: -9999px;
  overflow: hidden;
  /* height: 1%; */
  width: 19px;
}
a.toppanel-hide:after {
  content: '\d7';
  position: absolute;
  left: 4px;
  /* top: 0; */
  /* width: 20px; */
  /* height: 20px; */
  text-indent: 0;
  /* display: block; */
}
.toppanel-actions .btn-github {
  font-size: 70%;
  width: 163px;
  margin: 0 auto;
  color: #232323;
}
.toppanel-actions .btn-github:hover {
  background: linear-gradient(0deg, #e8e8e8, #f8f8f8);
}

a.toppanel-logo {
  display: inline-block;
  width: 100px;
  padding: 4px 6px;
  text-align: center;
  line-height:16px;
  position: relative;
  z-index: 1;
  -webkit-transform: translate(-94px, 112px) scale(0.25);
     -moz-transform: translate(-94px, 112px) scale(0.25);
      -ms-transform: translate(-94px, 112px) scale(0.25);
       -o-transform: translate(-94px, 112px) scale(0.25);
          transform: translate(-94px, 112px) scale(0.25);
  -webkit-transform-origin: 100% 100%;
     -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
       -o-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
a.toppanel-logo:hover {
  background: transparent;
  border: 0 none;
}
.toppanel-logo img {
  border: 0 none;
  width: 100%;
}
.toppanel .toppanel-logo {
  cursor: default;
  -webkit-transform: translate(35px, -8px) scale(1);
     -moz-transform: translate(35px, -8px) scale(1);
      -ms-transform: translate(35px, -8px) scale(1);
       -o-transform: translate(35px, -8px) scale(1);
          transform: translate(35px, -8px) scale(1);
}

/* toppanel animation */
#bin {
  -webkit-transition: top ease-in-out 100ms;
     -moz-transition: top ease-in-out 100ms;
       -o-transition: top ease-in-out 100ms;
          transition: top ease-in-out 100ms;
}
#toppanel {
  -webkit-transition: margin-top ease-in-out 100ms;
     -moz-transition: margin-top ease-in-out 100ms;
       -o-transition: margin-top ease-in-out 100ms;
          transition: margin-top ease-in-out 100ms;
}
a.toppanel-logo {
  -webkit-transition: -webkit-transform linear 120ms 120ms;
     -moz-transition:    -moz-transform linear 120ms 120ms;
       -o-transition:      -o-transform linear 120ms 120ms;
          transition:         transform linear 120ms 120ms;
}
.hideheader.ready a.toppanel-logo {
  top: -35px;
}
.hideheader.ready.toppanel a.toppanel-logo {
  top: 0;
}
/* slow to remove */
#jsbin .toppanel-slow #bin,
#jsbin .toppanel-slow #toppanel,
#jsbin .toppanel-slow a.toppanel-logo {
  -webkit-transition-duration: 5s;
     -moz-transition-duration: 5s;
       -o-transition-duration: 5s;
          transition-duration: 5s;
}

.toppanel-close #bin,
.toppanel-close #toppanel {
  -webkit-transition-delay: 120ms;
     -moz-transition-delay: 120ms;
       -o-transition-delay: 120ms;
          transition-delay: 120ms;
  -webkit-transition-duration: 100ms;
     -moz-transition-duration: 100ms;
       -o-transition-duration: 100ms;
          transition-duration: 100ms;
}
.toppanel-close a.toppanel-logo {
  -webkit-transition-delay: 0ms;
     -moz-transition-delay: 0ms;
       -o-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-transition-duration: 120ms;
     -moz-transition-duration: 120ms;
       -o-transition-duration: 120ms;
          transition-duration: 120ms;
}


/* CodeMirror lint */
/* The lint marker gutter */
.CodeMirror-lint-markers {
  width: 16px;
}

.CodeMirror-lint-tooltip {
  background-color: infobackground;
  border: 1px solid black;
  border-radius: 4px 4px 4px 4px;
  color: infotext;
  font-family: monospace;
  font-size: 10pt;
  overflow: hidden;
  padding: 2px 5px;
  position: fixed;
  white-space: pre;
  white-space: pre-wrap;
  z-index: 100;
  max-width: 600px;
  opacity: 0;
  transition: opacity .4s;
  -moz-transition: opacity .4s;
  -webkit-transition: opacity .4s;
  -o-transition: opacity .4s;
  -ms-transition: opacity .4s;
}

.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
  background-position: left bottom;
  background-repeat: repeat-x;
}

.CodeMirror-lint-mark-error {
  background-image:
  url("")
  ;
}

.CodeMirror-lint-mark-warning {
  background-image: url("");
}

.lint-icon-warning:before,
.lint-icon-error:before,
.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  position: relative;
}

.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
  padding-left: 18px;
  background-position: top left;
  background-repeat: no-repeat;
}

.lint-icon-error:before,
.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
  background-image: url("");
}

.lint-icon-warning:before,
.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
  background-image: url("");
}

.CodeMirror-lint-marker-multiple {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: right bottom;
  width: 100%; height: 100%;
}


.lint-icon-warning:before,
.lint-icon-error:before {
  content: '';
}
.lint-icon-warning.dis:before,
.lint-icon-error.dis:before {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%);
}
.lint-icon-error.dis:before {
  -webkit-filter: grayscale(100%) invert(85%);
}
.lint-error {
  background: #FFA;
  font-size: 80%;
  color: #A00;
  padding: 2px 5px 3px;
}
.console-wrapper {
  background: #FFF;
  color: #333;
}
.console-log-head {
  background: #ecf2fa;
  border-top: 1px solid rgb(220, 220, 220);
  /* border-top: 0 none; */
  color: #6293d3;
  cursor: pointer;
  float: none;
  font-size: 13px;
  height: auto;
  line-height: 19px;
  margin: 0;
  padding: 0.2em 0.2em 0.2em 1em;
  width: auto;
}

[open] .console-log-head {
  border-bottom: 1px solid rgb(220, 220, 220);
}

.console-log {
  /* border: 1px solid rgb(204, 204, 204); */
  /* border-top: 0 none; */
  font-size: 13px;
  height: 10.5em;
  overflow: auto;
}
.console-log-line {
  border-top: 1px solid #CCC;
  cursor: pointer;
  padding: 0.2em;
  padding-left: 2.3em;
  /* padding-right: 0; */
  position: relative;
}
.console-log-line:first-child {
  border-top: 0 none;
}
.console-log-line:before {
  display: inline-block;
  min-width: 1em;
  /* padding-right: 0.5em; */
  text-align: center;
  position: absolute;
  left: 0.6em;
}
#console-log-line-selected {
  background: #AFF;
}

/* embed tweaks */
.embed #control {
  height: 28px;
}

.embed #runwithalerts {
  float: right;
}

.embed #bin {
  top: 28px;
}

.embed .dropdownmenu a,
.embed .button {
  height: 18px;
  line-height: 20px;
}

.embed #panels {
  padding-top: 0;
  padding-bottom: 0;
}

.embed #panels .button {
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  height: 18px;
  line-height: 20px;
}

.embed .menu .brand {
  margin-left: 0;
  padding-left: 5px;
}

.embed .menu .brand img {
  margin-top: 2px;
}

a[data-pro]:after, .pro-required {
  content: 'Pro';
  color: #fff;
  position: absolute;
  right: 6px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  /* letter-spacing: 0.1em; */
  border: 1px solid #4CAF50;
  line-height: 10px;
  padding: 3px;
  border-radius: 3px;
  top: 11px;
  text-align: center;
  background: #4CAF50;
}

a[data-pro]:hover:after {
  background-color: #2E7D32;
  border-color: #2E7D32;
}

.gopro { /* not the camera...silly */
  text-decoration: none;
  position: relative;
  width: 100%;
  display: block;
  margin: 0;
  background: rgb(39, 192, 39);
  font-size: 15px;
  text-align: center;
  margin-top: -2px;
  color: white;
  color: white;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-top: 0;
  box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.1);
  line-height: 30px;
}

.gopro:hover {
  background: rgb(3, 166, 3);
}

.blog a[data-count]:after {
  content: attr(data-count);
  position: absolute;
  top: 3px;
  font-size: 10px;
  border: 1px solid rgb(216, 23, 23);
  /* border-radius: 10px; */
  display: block;
  right: 0;
  background: rgb(255, 0, 0);
  color: white;
  padding: 1px;
  width: 9px;
  line-height: 9px;
  height: 8px;
  text-align: center;
  font-family: monospace;
}

.love {
  color: #FF4136;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

#enableUniversalEditorLabel {
  color: rgb(98, 147, 211);
  position: relative;
  /* top: 7px; */
  left: 0;
  z-index: 999999;
  line-height: 16px;
/*   font-size: 16px; */
  /* background: white; */
  /* padding: 20px; */
  /* vertical-align: top; */
  /*transform: scale(1.2);*/
  /* transform-origin: 0 0; */
  position: absolute;
  bottom: 2px;
  /* left: 210px; */
}

#helpsearch {
  border: 0;
  outline: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  margin: 0;
  padding: 6px 100px 6px 10px;
  /* border-bottom: 1px solid #D5D5D5; */
  line-height: 25px;
  height: auto;
  cursor: text;
}

#helpsearch:focus {
  background: rgba(0, 0, 0, 0.04);
}

#result-count {
  color: #aaa;
  left: -80px;
  position: relative;
  text-align: right;
  width: 60px;
  display: inline-block;
}

#help.dd-right {
  right: 0;
}

#results {
  display: block;
}

#results a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 20px;
  padding-right: 10px;
  /* max-width: 191px; */
  /* padding-right: 0; */
}

.assetLoading {
  display: inline;
  position: relative;
  font-family: helvetica;
  padding: 0 0.4em;
}

.assetLoading a {
  text-decoration: none;
  color: blue;
}

.assetLoading .pro-required {
  top: 0;
  right: 0;
  position: initial;
  text-decoration: none;
  vertical-align: middle;
}

/* if the user is pro, hide the "pro" hints */
html.pro a[data-pro]:after,
html.pro .toppanel-no-pro {
  display: none;
}

.haspro {
  display: none;
}

html.pro .haspro {
  display: inherit;
}

div.loggedin,
div.loggedout {
  display: none;
}

.embed .label .size {
  display: none !important;
}

/* nav */
#control,
.control {
 background: rgb(237, 237, 237);
 background: hsl(0, 0%, 93%);
 border-bottom: rgb(191, 191, 191) solid 1px;
 border-bottom: hsl(0, 0%, 75%) solid 1px;
}
#control *,
.control * {
 text-shadow: none;
}

/* toggles */
.hasContent {
 font-weight: bold;
 background: none;
 }
.hasContent:after {
 display: none;
 }
.hasContent.active {
 font-weight: normal;
 }

/* thick line at the top of the panel */
.panel:before,
.focus.panel:before {
 background: none !important;
 }

/*panel backgrounds*/
.panel {
 background: rgb(247, 247, 247);
 background: rgb(247, 247, 247);
 }
.panel.focus {
 background: #fff;
 }
/*panel borders*/
.stretch.panelwrapper {
 border-left-color: rgb(230, 230, 230) !important;
 border-left-color: hsl(60, 0%, 90%) !important;
 background: white !important;
 }
/* panel borders hovered */
.resize:hover + .stretch.panelwrapper {
 border-left-color: #39f !important;
 border-left-style: dashed !important;
 }
.resize {
 cursor:move !important;
 }

/* panel menus */
.label.menu span strong a {
 color: rgb(0, 170, 255);
 color: hsla(200, 100%, 50%, 1);
 font-weight: normal;
 }
.label .name {
 color: rgba(0,0,0,0.5);
 }

/* avatar */
.avatar img {
  box-shadow: none;
  vertical-align: middle;
}
#accountBtn img {
  margin-top: -4px;
}

.open .avatar img,
.avatar:hover img {
  -webkit-filter: brightness(125%) saturate(125%);
  -moz-filter: brightness(125%) saturate(125%);
  -ms-filter: brightness(125%) saturate(125%);
  filter: brightness(125%) saturate(125%);
}

.pro1 .dropdowncontent {
  background: #FFFBDF;
  color: white !important;
}

.pro1 .dropdowncontent:after {
  position: absolute;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent gold transparent;
  bottom: 1px;
  right: 1px;
  content: '';
}